I'm building the following website for a client based on a WP premium theme. As you can see, I'm trying to set it so that images can be applied full-screen.
http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/
The problem I'm having is that I am now getting a horizontal scrollbar showing up when the image is there.
I've already set the image position to absolute so I would have thought this would prevent any scrollbar issues. Is there something I'm doing wrong?
Add this rule to your body
body {
overflow-x: hidden
}
First off, you should not load your background as img. Load it using background-image attribute on some fixed positioned element. This way, when the image is not available, you won't have an ugly browser placeholder saying [image-not-found].
Secondly, whenever you have an element set to width 100% and add a padding to it, it is going to overflow on the x axis. If you don't want that, set the overflow-x to hidden on it's parent, as #abforce suggested.
The best way to add a full background image is to add it as a background to a fixed positioned div which is a direct descendant of the body element.
Here's an example:
<body>
<div class="full-background"></div>
<!-- Here goes your content... -->
</body>
CSS:
.full-background {
position: fixed;
background-image: url('link-to-your-image');
background-size: cover;
top: 0;
width: 100%;
height: 100%;
}
You might want to set the image as a background-image with CSS instead of an IMG element.
#content-wrapper {
background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg');
}
You can set it as background image:
.background-photo{
background: url('url_to_image') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can use the image as background in the body tag width background-size set to cover instead so the image will fit your page
Related
I don't know how to better summarize the question, but here's the problem. I set my html's height to 100% as suggested by Kevin Powell and other peoples best practices so things like the footer and such use the whitespace and stick to the bottom of the page, however it presents the problem that if I want to give my body tag a background-image and the current page is "taller" than the viewport the image will start to repeat every 100% of the viewport, i.e. the 100% set by the html tag, which is not always the desired outcome.
How should I handle this, not to use background-image on my body tag? use a better tiling background-image?
P.S. I don't want to resort to having to wrap all my page's content on a wrapper div inside the body tag... unless well it's the only solution. The body tag has min-height of 100% I'm currently on Firefox.
I think it is easily solvable by using
background-size: cover;
source 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
You can also use just the background shorthand to set all the properties at once.
source 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/background
You can set html to occupy 100% of the user's screen by setting min-height: 100vh. then you could set body height to height: 100% to occupy the parent's height (HTML), so this way html and body have the same height if the content is not bigger than 100vh.
If you want to have the same background as you scroll in the page, you can set background-attachment: scroll and background-repeat: no-repeat
something like this
html {
min-height: 100vh;
}
body {
height: 100%;
width: 100%;
background-image: url( /* put your background url here */ );
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
background-attachment doc in MDN
I'm trying to create a webpage. I'm having a little difficulty
with getting my background picture to show up. I had it up and running, but I decided I wanted to give it a responsive design, and I can't figure it out. This is my code for the image:
<style>
body .title_img {
background-image: url("SplashScreen.jpg");
height: auto;
width: 100%;
background-position: center;
z-index: -1;
}
</style>
<div class="title_img">
<!-- Background Splash Screen -->
</div>
If I give the height/width a definitive size (pixels) it shows up. I don't understand why 100% width with auto height wouldn't give me a picture that is 100% the size of the body (which I THINK i have made sure it was the 100% of the html document) and a height that is automatically proportional to the width. Can someone explain what I'm doing wrong?
EDIT- Added the HTML code.
Full-Page Background Images
I think what you are trying to create, is a full-page background image for your website. Based off of reading the code you provided, I believe you want something that does the following:
Fills entire page with image, no white space
Scales image as needed
Retains image proportions (aspect ratio)
Image is centered on page
Does not cause scrollbars
As cross-browser compatible as possible
Isn't some fancy shenanigans like Flash
If that is what you are trying to create, then I found a few lines of code that could help. Here is an example of how you could go about doing this with your image using css:
CSS File (That's where the magic happens):
html {
background: url("SplashScreen.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just make sure your html file is setup correctly to use the css file, and it should create a cool background image you can use for your websites.
You can read more into this here and learn more about what makes this work.
Try setting height: 100% in body and html in your css:
html, body {
height: 100%;
}
And then put background-size: cover in body .title_img:
body .title_img {
background-image: url("SplashScreen.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
See reference here.
Use
background-size: cover
or
background-size:100% 100%.
with
background-repeat: no-repeat
That will set it to 100% of its container.
I have my HTML background set up like this:
html {
background: url("main_bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Which works exactly like I want it to. The background is centered, covers the whole browser window and stays proportional.
However, if I have a lot of content that extends the page height and makes it scroll then my background image expands to include the height of the large div and it ends up zooming in way too much.
Is there a way to exlcude the height of the div from the overall height of the HTML element so that the picture does not get larger as the DIV does?
Sort of like having the div scroll through the browser window without affecting the height of the HTML element?
I would recommend changing the container that you're putting the background in. By definition you're targeting everything on the page by selecting the html element. I would make a container and put all of the elements you want in front of the background in that.
<html>
<div class="page_container">
<div> Your elements </div>
</div>
<div> The other components that are stretching your background </div>
</html>
Then you can just do this:
.page_container {
background: url("main_bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What if you use:
background-attachment: fixed;
?
Fiddle
$(document).ready(function(){
var bodyBG = $('.no-bg').height();
$('body').css('background-positionY', bodyBG);
});
Try this, this not reduces the size, but the position so it takes less size to cover depending on the height of what you want to exclude.
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.