Menu
I dont want to use html tag. This is my css. I am using bootstrap 3.0.
background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; On 100% zoom this is OK. but when I zoom in at 180% approx, the image will be short from top and bottom, I want some css tricks.
505
Just add . bg-img class on your <img> element and .has-bg-img class to parent element that you want to apply a background image. Images are part of the DOM and are transformed into CSS background-image after they are fully loaded.
Here's how to create responsive background images with CSS: Use the background-size property to encompass the viewport. Give this property a cover value that will tell a browser to scale the background image's heights and width so that they always remain equal to or greater than the height/width of the device viewport.
Use background-size property to cover the entire viewport The CSS background-size property can have the value of cover . The cover value tells the browser to automatically and proportionally scale the background image's width and height so that they are always equal to, or greater than, the viewport's width/height.
We can add a background image to the jumbotron using the CSS style sheet. Use . background-image : url("image_address") within the stylesheet. Here is an example to add a background image to the jumbotron.
For full image background, check this:
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
