I have this image in css and I want to add bootstrap class: img-responsive to it so it becomes responsive. It's easy if it's in HTML but how to do it in CSS?
#index-jumbotron {
height: 490px;
margin-left: 0;
margin-right: 0;
background-image: url("../images/Eiffel%20Sunset%203.JPG");
Thanks!
Here's how you can do responsive background images in CSS :
body {
margin: 0;
}
#index-jumbotron {
background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
background-size: cover;
padding-bottom: 46.128%; /* <- This value should be equal to height / width */
}
<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>
(see also this Fiddle)
This works both with and without Bootstrap.
Try:
background-size:cover;
Or
background-size:contain;
Related
I have tried using media query to resize images on my page according to screen-size but it didn't work , need help.
Here is the relevant code of images in my html :
<body>
<div class="img certhtml"></div>
<div class="img certcss"></div>
<div class="img certjs"></div>
<div class="img certphp"></div>
</body>
</html>
Here is the relevant css pertaining to the class:
.img {
width: 836px;
height: 588px;
border: 4px solid #38b6ff;
margin: 5px;
background-size: cover;
background-repeat: no-repeat ;
margin: auto;
}
.certhtml {
background-image: url("images/SW_html5_foundations.png");
}
.certcss {
background-image: url("images/SW_css3_foundations.png");
}
.certjs {
background-image: url("images/SW_javascript_foundations.png");
}
.certphp {
background-image: url("images/SW_php_7_foundations.png");
}
This code allows the images to be seen clearly on full screen ,when screen width goes down below 776px then it buggers up the images.
I tried using
#media and (max width:776px) {
.img{height:60%;width:60%}
}
Tried lots of fiddling about but didn't work
but to no avail, would appreciate help, thanks.
If you have an image inside the div, for example
<div class="img certcss"><img src="https://example.com/sample.jpg" alt="you own alt"></div>
Then you should apply the correct CSS selector to the IMG, and also you need to correct the media selector
#media only screen and (max-width: 776px) {
.img img {
height:60%;
width:60%;
}
}
You could also do width 100% and add-in
.img img {
object-fit: cover;
}
Which will ensure the full responsiveness of the image.
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I need my background image to be responsive. I have used background-size: contain and that seems to work fine but I need the height of my div to be responsive as well.
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
background-size: contain;
height: 600px;
}
<div class="container">
<div class="bg"></div>
</div>
For now the height is 600px and based on the width of the screen, you will see a red background, which should not be the case.
I have tried background: cover, but it will scale the image. It should be 100% of the div but it should not be cut.
How can I fix this?
https://jsfiddle.net/mt386Ln0/
There is an easy solution without using JavaScript. Just add <svg> with specific ratio inside a container.
You must use image dimensions as viewBox <svg viewBox="0 0 960 628"></svg>
Example:
div{
background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
}
svg{
width:100%;
display:block;
visibility:hidden;
}
.demo-1{width:100%}
.demo-2{width:40%}
<div class="demo-1">
<svg viewBox="0 0 960 628"></svg>
</div>
<hr>
<div class="demo-2">
<svg viewBox="0 0 960 628"></svg>
</div>
If you know the ratio of the image you can consider the padding trick:
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}
.bg:before {
content: "";
display: inline-block;
padding-top: calc((628/960) * 100%); /* OR 65.42% */
vertical-align: top;
}
<div class="container">
<div class="bg"></div>
</div>
Instead of using background-size: contain, I used background-size: auto, which seems to work the way you want it to. Furthermore, I added some javascript to help with the resizing.
window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
background-size: auto;
height: 600px;
}
<div class="container" id = "a">
<div class="bg" id = "b"></div>
</div>
Have you tried:
background-size: cover
this will allow the background to always cover the DIV - you might need to tweek the -
background-position: xxxxx
as sometimes the screen size your viewing the image on will mean setting a #meda query to get it right for each different deceive (i.e. mobile or desktop)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I'm doing some coding for a tumblr theme and running into this problem: "background attachment: fixed" doesn't stop the background image from scrolling up and down; it still moves with the content.
HTML
<div id="content">
<div id="posts">
posts...
</div>
</div>
CSS
#content {
background-image: url('{image:Background Image}');
background-repeat: no-repeat;
background-attachment: fixed;
height: auto;
width: calc(100% - 300px);
float: right;
}
The width doesn't work either, but I've been told that's just how fixed works, and I'm just looking to fix that fact that the image still moves.
Sometimes the theme's css file can override your custom edits. Try placing !important in the background-fixed property like this:
background-attachment: fixed !important;
Still haven't discovered why it's not working, but I have discovered an alternative:
Create a separate image for the background and place this above the content in an img tag...
HTML
<img id="image" src="source" />
<div id="content"></div>
...then use this handy CSS layout to make the image appear beneath the content
CSS
#image {
height: 100%;
width: 100%;
position: fixed; //to prevent scrolling
z-index: -1; //sets z-index, which wasn't working in my previous setup
}
#content {
background: transparent;
position: absolute;
z-index: 1;
}
JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/
I would like to create from this image a styled DIV box for my website :
How can I do that using CSS and HTML.
I cut the image in three different parts :
However I don't know how to use them with Divs to create my vertically expendable box.
Thanks for your help!
I assume that you want your content to start inside the top one, but expand to the second one as well. If that is the case then you will need some overlap on the background-images.
HTML
<div class="expandable">
<div class="content top">content goes here</div>
<div class="bottom"></div>
</div>
CSS
.expandable{
background:url('middle-image.jpg') 0 0 repeat-x;
}
.top{
background:url('top-image.jpg') 0 0 no-repeat;
height:auto!important;
height:100px;/* whatever the height of the top (big) area is */
min-height:100px; /* whatever the height of the top (big) area is */
}
.bottom{
background:url('bottom-image.jpg') 0 0 no-repeat;
height:10px; /* whatever the height of the bottom image is. */
}
Example at http://www.jsfiddle.net/gaby/s8XZQ/
This could be done with CSS3 features like border-radius,box-shadow and gradient. Here's an example. Should work in Opera, Firefox, Chrome and Safari.
Also, you can do this with :before and :after CSS pseudo-elements, like in other two answers.
Edit: For Internet Explorer all those features are possible with behavior file, like PIE.
Try this:
HTML:
<div class="container">
<div class="top"></div>
<div class="middle">content here content here content here</div>
<div class="bottom"></div>
</div>
CSS:
.container { width: 300px; }
.top { padding-top: 15px; background: url(topimage.png); }
.middle { background: url(middleimage.png); }
.bottom { padding-bottom: 15px; background: url(bottomimage.png); }
Adjust the paddings in the CSS so that they match the height of your topimage and bottomimage, and the container width so that it matches the image's widths.
Use three separate divs, and set the top padding of the middle one to the minus height of the top one. So:
#top-div {
height: 25px;
background-image: url(bg-top.jpg);
}
#middle-div {
background-image: url(bg-middle.jpg);
padding-top: -25px;
}
#bottom-div {
background-image: url(bg-bottom.jpg);
}