my header background image changes size when I change the width of my browser, to the point that if the width gets small enough, my image will get pushed out. I have background-size: 120%; and I know that's what's causing it. Would there be a way to set the minimal size of the background image via percentage? If not, how could I fix this?
You can vist my website at erraticfox.tumblr.com if needed a example of the problem.
Oh and here's my headers CSS code:
#header {
margin: auto;
display: table;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px;
background-size: 110%;
}
Here's a jsfiddle, you might want to resize the width of the result window and you'll see my problem: http://jsfiddle.net/2AbKb/
Its not resizing here. I have removed 'display-table' as i dont think it was necessary.
HTML
<div id="hed">
</div>
CSS
#hed{
margin: auto;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px
background-size: 110%;
background-color:black;
}
I'd suggest something like this:
#header {
margin: auto;
display: table;
height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Lose background-attachment:fixed; Is that the effect you're after?
Related
help, header banner is incomplete on phone screen
.imgbanner{
height: 200px;
max-width: 100%;
margin-top: -70px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
How can I make it display well horizontally?
Real image: https://i.imgur.com/fKnCN5Z.png 1024x312px
Try removing the width and margin. You also might not want to set a fixed height, because this will crop your image on smaller screens.
Like this, the text in the image might not be readable when viewed on smaller screens.
.imgbanner {
height: 200px;
/* max-width: 100%; */
/* margin-top: -70px; */
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
You should remove max-width and custom height property because this will crop your background image or try to add property background-repeat:no-repeat;
.imgbanner {
height: 200px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
background-repeat: no-repeat;}
<div class="imgbanner"></div>
I have been searching for a while, I still cannot find the exact answer.
I have a <div> for which the width takes 100% of the screen, the height is fixed at 600px.
I would like to add a background picture to the div for which the picture height would fit the <div> height (600px and no picture crop). Whenever I modify the width of the screen, the height should always remain 600px. The picture would then be centered and cropped on the width direction.
Try this:
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}
<div class="container"></div>
Did you tried
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`
I think this what you are looking for :
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}
<div>
test
</div>
Hope this was helpful for you.
https://jsfiddle.net/2esv5wja/
css code snippet:
.imageContainer {
height: 750px;
width: 100%;
overflow: hidden !important;
}
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: 100%;
width: auto;
height: 100%;
padding-top: 3%;
padding-bottom: 3%;
min-width: 1200px;
overflow: hidden !important;
}
Is there a way to make it so when the image stops scaling, it crops to the center? That is, as it stands, it crops from the right. Can we crop from both sides evenly? If so, how is that done?
Please see the updated jsfiddle > here
You need to scale by height in order to get the crop effect you are looking for in order to do this, please see the code:
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: auto 100%;
height: 500px;
padding-top: 3%;
padding-bottom: 3%;
}
The background size property handles the scaling which is why I have changed it to be so that the width is always auto and the height is 100%, I have then added a hard height in pixels which you can change. This creates the desired effect.
Easy answer is to set the
background-size: 50%;
Looks ok on your fiddle.
replace background-size: 100%; with background-size: cover;
https://jsfiddle.net/2esv5wja/4/
Try this:
background-size: 100% 100%;
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..
However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.
So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?
Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/
(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)
My current code looks like:
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
#include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}