My ultimate goal is to have a block of text in a fixed position relative to a background image.
But what seems to be preventing this is that when I resize the browser, the image stays the same size like I want, but the image shifts -- i.e., the top of the image rendered isn't always the top of the image source.
Here's a mockup - imagine that I want the block of text to be in the blue box:
http://jsfiddle.net/rrauenza/9hkn8p4e/embedded/result/
The yellow "ceiling" in this picture sometimes disappears for different browser sizes.
<head><style>
.intro-header {
text-align: center;
color: #f8f8f8;
background: url(http://c3softworks.com/demos/images/backgrounds_04.jpg) no-repeat center top;
background-size: cover;
background-position: center top;
height: 700px;
}
.intro-message {
position: relative;
padding-top: 100px;
height: 700px;
}
</style></head>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Title</h1>
<h3>...subtitle</h3>
<hr class="intro-divider">
<div class="col-lg-2 col-lg-offset-3">
<h4>Something</h4>
</div>
<div class="col-lg-2 col-lg-offset-2">
<h4>Something Else</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Remove:
background-size: cover;
If you're counting on the background image not to scale it might help not to ask it to.
Also, in your fiddle .intro-header has a background-position:center bottom, while here you post center top. It needs to be center top of course.
Related
my background image on the div looks too zoomed and is not clear it loses it clarity
this the html and styling that i've tried
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
styling
.intro{
background-image: url("../images/house4.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
It's okkey in here ... use "background-size: 100% auto;"
This is because your image is more wider then height & u used background-size: cover; . To cover all background, that's why it's zoomed and cropped rest width
Your code is okkey, just use resized image like 500px*333.2px (or around this ratio) to show all image inside 66.64% padding
.intro{
background-image: url("https://image.freepik.com/free-vector/geometric-models-gradient-background_23-2148326516.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
<div class="grid-x intro">
<div class="cell large-12 medium-12 small-12 one">
</div>
</div>
<!-- end of intro -->
May be the quality of the image is not great. Or if you don't need full covered background, you can shrink the background image by doing
background-size: 50%;
I've already made the background image to full size in my page, but when I inspect and try to display it in phone mode, my background image get cropped, how can I resist this thing so it can't get cropped but always cover particular part of the page
<div class="inner-banner has-base-color-overlay text-center" style="background: url(header.jpg); background-size: cover; position: center;">
<div class="container">
<div class="box">
<h3>About Us</h3>
</div>
</div>
</div>
If you are using background image and You want see in mobile view then it will be cut off of the background image you need to call img src.
<style>
.header-img {
max-width:100%;
margin:0 auto;
display:block;
}
#media all and (max-width:600px){
.header-img {
height:300px;
object-fit:cover;
}
</style>
<div class="inner-banner has-base-color-overlay text-center">
<div class="container">
<div class="box">
<img src="images/header.jpg" class="header-img" alt="">
<h3>About Us</h3>
</div>
</div>
you can set these css for BackGround Image :
background-position: 100% 100%;
background-size: cover;
and your manual height
replace your style with below code : -
background: url(header.jpg); background-size: 100%; position: center;
This question already has an answer here:
Make background image the size of screen
(1 answer)
Closed 5 years ago.
Ok, so my question is how do I make my image more responsive? I am a new coder, so I'm still trying to understand css more. I've tried using the contain value, but it doesn't cover the entire div. I also tried cover, but it doesn't show the entire image when it expands inside the div. If anybody has any ideas at all, I would love to hear from you. Thanks Also, it's not the same question as covering the entire page. I want the image to cover inside my div, and it doesn't seem to be working.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background: url(dickgregory.jpg);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Your image is taking up the full width and height of your .tribute element. The problem is that you've both added margin to the .tribute element, and restricted its width.
Removing the margins and setting width to 100% shows the image covering the full area as expected.
Note that background-size: cover may stretch or crop the image, and background-size: contain will resize the image to ensure that it is always visible.
This is best demonstrated with an example.
Contain:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: contain;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Cover:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Hope this helps! :)
Unfortunately cover and contain are the best ways to handle an image that isn't the proportion you want. You could use an <img> tag instead of a div with a background image, if that would work for your use. Otherwise, I usually add a background color to the element that is similar to the image, so that it blends in better.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #666;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
I have a div on the top of the page that is assigned a parallax image, when the view port is not that wide the image is not responsive, how can I make the background image responsive ?
#parallax{
height:100vh;
background:url("../images/keyboard.jpg");
background-size: cover;
background-attachment: fixed;
}
<div id="parallax">
<div class="col-md-1"></div>
<div id="profile" class="bottom-align col-md-4">
</div>
</div>
and here are the screenshots of what I mean by unresponsive
basically I want "web site" to show when the view port is not wide as well instead of "WE"
background-size: cover is scaling your background image to fill the whole height of the containing element which on a mobile device is tall and narrow, cropping the image.
You should either use background-size: contain instead of cover, or allow the containing element to shrink to less than 100vh. The caveat with the former is you need to figure out what to fill the rest of the container with.
Here's an example:
.target {
background: url(http://placekitten.com/300/100);
background-position: center center;
background-color: teal;
background-size: cover;
background-repeat: no-repeat;
height: 150px;
width: 100px;
}
.better {
background: url(http://placekitten.com/300/100);
background-position: top center;
background-color: teal;
background-repeat: no-repeat;
background-size: contain;
height: 150px;
width: 100px;
}
<html>
<body>
Cover:
<br>
<div class="target"></div>
Contain:
<br>
<div class="better"></div>
<div>
Original:
<br>
<img src="http://placekitten.com/300/100" ?>
</div>
</body>
</html>
Have your image width be 100%. I put the image tags inside the divs to represent screen sizes.
<div style="width:20%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:40%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:60%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:80%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:100%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
A straightforward solution would be :
Make your body size stretch to the whole view-port
body{
width:100%;
height:100%;
/* on the example due to some overflow I've used 97% to prevent scroll bars
....
make your background image fill the body element
background-image:url(...);
background-position:cover;
And that's it,
To live a white space for your header offset your image position down, by the width of your header.
background-position:50px;
The inconvenience is when you want to have actual content you can't rely on the same style sheet for the other pages, you have to change it.
Of course you won't see any responsiveness in the example here because the way the snippet is in a fixed width container. But it has work as expected when tested. (at least you can see how the image is stretched compared to the original one here )
.header{
border:solid ;
width:100%;
height:50px;
text-align:center;
}
body{
width:97%;
height:97%;
background-repeat:no-repeat;
background-image:url(https://i.stack.imgur.com/AWVa6.jpg);
background-position:0 50px;
background-attachment:fixed;
background-size:cover;
}
<div class="header">your header or navigation bar</div>
I have a DIV ...
<div id="content">
</div>
Now...In the design and if you think of it as a rectangle has the top as a header and also the footer is different so I cannot just create a 1px background image and repeat it.
I would have to do something like:
<div id="content">
<div id="header">This will have a fixed bg image</div>
<div id="body-content">This will have a repeated bg image and it's the part that can grow.</div>
<div id="footer-content">THis will content a fixed bg image for the footer</div>
</div>
Can anyone advise on the best way to handle this kind of design CSS wise please?
#header
{
background-image: url('header.png');
background-repeat: no-repeat;
}
#body
{
background-image: url('body.png');
background-repeat: repeat-y;
}
#footer
{
background-image: url('footer.png');
background-repeat: no-repeat;
}