This question already has answers here:
How to get a parent element to appear above child [duplicate]
(7 answers)
Closed 9 years ago.
In my example http://jsfiddle.net/cXbMb/ I need the logo image to be displayed fully, i.e. the header image have to be partially overdrawn. There is also next requirement: the header image have to begin 5px bellow the headline.
<!DOCTYPE html>
<html><head></head>
<body>
<header>
<h1>Headline</h1>
<div></div>
</header>
</body>
</html>
body { padding: 0; margin: 0 auto; width: 400px; }
header {
background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
background-position: left top;
background-repeat: no-repeat;
}
header h1 { text-align: right; margin: 0 0 5px; padding: 0; font-size: 1em; }
header div {
background-image: url('http://placehold.it/400x100/0000ff&text=HEADER');
background-position: left top;
background-repeat: no-repeat;
height:200px;
}
To solve it in the way you're outlining you should create the logo as its own element, and use z-index. Like so: http://jsfiddle.net/fzUtb/1/
<!DOCTYPE html>
<body>
<header>
<div class="logo"></div>
<h1>Headline</h1>
<div></div>
</header>
</body>
and the new styles are like:
header{position:relative;}
.logo { background-image: url('http://placehold.it/100x50/ffff00&text=LOGO'); background-position: left top; background-repeat: no-repeat;position:absolute;z-index:2;width:100px;height:50px; }
It may be hair-splitting, but I would recommend that the logo not be a CSS image! CSS is about style, but this logo is real content, so I believe semantically an HTML element makes more sense. This way it will print (CSS backgrounds don't print), and it can have ALT text for screen readers and Google!
I think the only way you're going to get the logo image to display on top of the header, is by moving it out into another child element. You don't need additional markup for that though - you can just user the :after pseudo-element.
header {
position:relative;
}
header:after {
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
background-position: left top;
background-repeat: no-repeat;
}
Related
Actually, I thought background property in css is very easty to learn.
But now image sprite is annoying me.
<style type="text/css">
body{
background-image: url("../../Images/tulip.gif");
background-repeat: no-repeat;
background-attachment:fixed;
color:#665544;
padding:20px;
}
</style>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p>some long text</p>
</body>
In this case, the background-position property is used to describe from where
the background-image should be displayed. It is quite easy to understand.
<style type="text/css">
a.button{
height:36px;
background-image: url("../../Images/button-sprite.jpg");
text-indent:-9999px;
display: inline-block;
}
a#add-to-basket{
width:174px;
background-position: 0px 0px;
}
a#framing-options{
width:210px;
background-position: -175px 0px;
}
a#add-to-basket:hover{
background-position: 0px -40px;
}
a#framing-options:hover{
background-position:-175px -40px;
}
a#add-to-basket:active{
background-position: 0px -80px;
}
a#framing-options:active{
background-position: -175px -80px;
}
</style>
<body>
<a class="button" id="add-to-basket">Add to basket</a>
<a class="button" id="framing-options">Framing options</a>
</body>
But in this code, background-position is used to display a part of the image.
I don't understand why and how??? I understand background cannot move to bottom
or right because a tag is not so big as body tag.
https://www.w3schools.com/cssref/pr_background-position.asp
but w3schools says background-position sets the starting position of a background image. That doesn't say this property can display a part of image.
Can somebody explain me?
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
I have the following rule:
background: url(../img/redlines.png) repeat-y left 50px;
As you can see, the background image should start 50px below its div, and it works with no-repeat, but if I set repeat-y part of the image shows up at top of the div as well.
Any way to avoid this, and to keep repeating downwards only?
This is how it's supposed to function. For a tiled image, the position is merely the starting position. I would suggest something like:
HTML
<div class="foo">
<div class="bar">
<div class="content">
</div>
</div>
</div>
CSS
.foo {
padding-top: 50px;
}
.bar
background: url(../img/redlines.png) repeat-y left top;
}
.content {
margin-top: -50px;
}
When you use repeat-y, adding 50px to the top only changes the floating point of where the repeat starts.
You will need to add margin or relative/absolute positioning to achieve the same effect.
as you haven't provided a jsfiddle or any images, i'm assuming you could try background-position attribute in css.
refer to: http://www.w3schools.com/cssref/pr_background-position.asp
you may try :after on your container, see this example:jsfiddle
<div id="test"></div>
#test {
width: 500px;
height: 500px;
position:relative;
}
#test:after {
content:"";
position:absolute;
top:50px;
left:0;
right:0;
bottom:0;
background: url(http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg) repeat-y left;
}
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)