I want the header to have an image for background. And I want that background image to have a 100% width and the rest of the image for the height (for whatever maintains aspect ratio for height).. and the header elements on top.
I tried to apply..
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
}
but this makes the background stops right where the header elements stop (the navigation menu).. I want the background image to go all the way down till the image itself is finished..
I'm sorry if this doesn't make any sense.
If I've understood this correctly the height of your header elements is less than the height of your picture.
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
height: <height of the image in pixels>px
}
This will make both the same height so that the image will not be cut off
You can use the z-index property of the css.
CSS:
header
{
position: absolute;
top: 0px;
right: 0px;
height: auto;
}
span
{
z-index: 2;
}
img
{
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
HTML:
<header><span>Your text here</span><img src='Your image.JPG'/></header>
Related
I have this in my CSS:
.cover .cover-image {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-size:100%;
background-size: cover;
background-position: center;
}
I also have this in my HTML:
<div class="cover-image" style="background-image : url('./bkg.jpg');">
bkg.jpg is a 1939x1131 image - bigger than any of my monitors. On my smallest (1280x1024) monitor, it displays fine:
On my medium (1440x900) and large (1920x1080) monitor - both of which are smaller than the image - it shows a bit of white between the image and the scrollbar:
Why does this show, and how do I fix it?
Check your image source
https://chipperyman.com/dota/bkg.jpg
You have a white bar on your image.
double on background-size your code, please fix background-size:100%, otherwise you will get issue.. And i mean you not need using background-size because your image already bigger than your screen..
you need normalize html, body
html, body {
padding: 0;
margin: 0;
}
there.
Basically you are having an absolute positioning bug here. Just add 'left: 0px;' to your .cover .cover-image selector as per following:
.cover .cover-image {
z-index: -1;
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-size:100%; /* old browser fallback, but I'd delete it */
background-size: cover; /* duplicate of background-size */
background-position: center;
}
Here is also a jsfiddle example of fixing it: http://jsfiddle.net/webyourway/868L6hhg/
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.
I am building a customization script where a user can upload an image and drag it around a template image to get a desired result. The problem is the template image is over 1000px tall and wide, so I put it inside a container limiting it's height/width.
How do I make it so the uploaded image is scaled exactly the same so when I create the image via PHP I can take the left: and top: CSS values and apply them to the much larger template image and uploaded image?
Current CSS:
#template {
position: relative;
padding: 0;
width: 500px;
height: 500px;
z-index: 1;
}
#uploaded {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
I'm not quite sure if that is what you are asking for … anyway:
The CSS3 property background-size: 100% lets you specify that the background image of should fill out the container's size and stretch proportionally. Together with background-repeat: no-repeat it might be what you are looking for:
#uploaded {
height: 500px;
width: 500px;
background-image: url(...);
background-size: 100%;
background-repeat: no-repeat;
}
Demo: http://jsfiddle.net/pu76s/3/
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
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;
}
it's should cover all youre page even when page size is changed