Supposing I'm setting a background image for a web page in CSS like this:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url(images/desk.gif) repeat bottom left;
}
Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?
Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?
Thanks!
Layered backgrounds are part of the CSS3 Working Draft but, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.
Using your example code, this would look like:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url("images/top.gif") left bottom repeat,
url("images/desk.gif") left bottom repeat;
}
I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.
As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback (check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
Hope this helps!
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
For the syntax you can choose between
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
background-image:url(..), url(..);
background-position:left top, left bottom;
background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
Attention! The following will create two backgrounds, even though you specified only one image url:
background-image:url(..);
background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
Ancient question here but the answer for this is the :after pseudo-element.
SCSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
&:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
}
CSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
}
body:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
The only way is to use another container. Each element may contain only one background image.
Use absolute positioning and a z-index to get the second element on top.
link text
Above mentioned link best describes what you r upto...
Don't forget you can apply styles to the HTML element:
html {
background: url(images/whatever.gif);
}
Related
This question already has answers here:
Can you apply a width to a :before/:after pseudo-element (content:url(image))?
(3 answers)
Closed 5 years ago.
I've started learning HTML/CSS but ran into a problem that has been discussed sometimes around here, but the solutions don't seem to fix my problem, so I'm wondering what I am doing wrong.
I want to use content: url() in CSS, specially because I want some images to change on :hover.
After searching for this problem, the solution mentioned here and on other threads (include :before), makes the image appear, but completely ignores the height/width set, effectively showing the image, but with its original size.
Have also tried changing it to "background-image: url ()" but the problem remains. Why aren't the height/width being accepted? I'm clueless here.
<div id="logo"></div>
CSS:
#logo {
content: url(images/asspreto.png);
height: 90px;
width: 168px; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
float: right;
vertical-align: middle;
}
#logo:hover {
content:url(images/assazul.png);
cursor: pointer;
}
If you want an image to fit in the available space, you need to indicate so. You can do this using the background-size directive. To make it so that the image fits in the available space, but keeps its aspect ratio, use contain.
Here is an example. You can see how the image is scaled and does not fill the entire element.
#logo {
width: 400px;
height: 300px;
background-image: url('https://placehold.it/500?text=500x500, but scaled');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #000;
}
<div id="logo"></div>
Here is my interpretation: you can't change the dimensions of the media supplied to the render via content: url(). It's not mentioned in the specs though, but you can see that setting dimensions simply won't work when placing media with the help of pseudo elements.
I myself experimented a bit on this and this is what I come up with: http://codepen.io/rahul_arora/pen/GWvNgJ
You simple can't resize the media inserted using pseudo elements with height, width, object-fit, etc. It will take its space and only the overflow can help you to hide its overflowing.
If you really want to get this done with the help of pseudo elements only, an alternative way to do that is by using the image as a background.
.logo {
position: relative;
height: 90px;
width: 168px;
}
.logo:after {
position: absolute;
top: 0;
left: 0;
content: "";
background: url(https://unsplash.it/g/200/200?image=1062) 0 0 no-repeat / cover;
height: 100%;
width: 100%;
}
.logo:hover:after {
background-image: url(https://unsplash.it/200/200?image=1062);
}
<div class="logo"></div>
I hope that solved it for you. Cheers!
#logo:before {
background: url("https://www.gravatar.com/avatar/732637806aee1bf98e7ef1f3658db84a?s=328&d=identicon&r=PG&f=1")no-repeat;
height: 200px;
width: 100%; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
float: right;
vertical-align: middle;
content:"";
height:300px;
width:300px;
position:absolute;
top:0;
left:0;
}
#logo{position:relative;}
<div id="logo"></div>
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
So i have this DIV with a background
this is the style:
#book{
width: 800px;
position: absolute;
right:0;
top: 0px;
font-family: love;
font-size: 20px;
background:url("../img/boek.png");
}
The problem that I have is that there is space between those two backgrounds, and I really don't know why because I've never else used something like margin-top or paddin-top etc...
I just want the two backgrounds to touch eachother
This is an incomplete question or its incoherent.. But add repeat after backround.to make it repeat the full length of a div.. If thats what youre asking.
Background: url() repeat;
probably html, body {
margin: 0;
}