I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
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;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.
I have an image background on my website:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
(...)
}
There are not any problems on PC, but mobile devices with vertical screen renders background not exactly in the same way: it seems that mobile browsers fit the background horizontally, so vertically it covers only small piece of website. I've tried to fix it by using different values for background-size attribute, but it didn't work.
My CSS + HTML:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
margin-left: 0;
margin-right: 0;
}
#overall {
margin-left: 0;
margin-right: 0;
width: 100%;
height: 100%;
}
#logo {
position:absolute;
left:0;
top:0;
}
#content {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 300px;
background-color:rgba(255,255,255,0.5);
text-align: center;
}
and
<body>
<div id="overall">
<div id="logo"><img src="logo.png" width="654" height="150"></div>
<div id="content"><img src="cont.png" border="0"></div>
</div>
</body>
This is the solution that I came up with. It works perfect on both landscape and portrait screens.
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I would suggest you to load two different images. One for desktops and another for mobile devices. You can use the less sized image for the mobile devices which can in turn reduce your loading time for mobile devices. You can use the CSS Media Queries to do so. Here is a tutorial for the CSS Media Queries.
CSS Media Queries & Using Available Space
I have a webpage with a css style file.
When I try to scale the header2.png in the code below, the picture gets cropped instead.
Any idea Why?
#header {
background:url(images/bg.gif) repeat-x 0 0;
height: 70px;
position: absolute;
}
#logo a {
background:url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
}
You need to use the background-size CSS property in order to get the picture to scale. One option you can use is to get the image to cover the header proportionally, like this...
#logo a {
background: url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Of course, you can experiment with this by changing "cover" to pixels or percentages. For more information on resizing the background in CSS... visit http://www.w3schools.com/cssref/css3_pr_background-size.asp
Why don't you re-size your header2.png image to the size at which you want.