My web page uses a full page stretch background image. My problem is that the background image seems to be covering the top 10px banner/header I am trying to add in the form of a repeating background image (so I can use CSS opacity). Here's the full page:
<html><head>
<style type="text/css" media=screen>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 14px;
}
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
#banner{
background: url('images/banner2.gif');
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
padding:50px;
text-align: center;
}
</style></head>
<body>
<img src="images/background.jpg" id="bg">
<div id="banner">
Banner Test Text
</div>
</body>
</html>
I have tried adding z-index but to no solution. Any input for what I'm doing wrong is hugely appreciated. Please note that this implementation of the full page background image is the best I have achieved with my image, so it'd be great if a solution to accommodate that.
Ah, managed to get it myself. For any future readers of this, all I needed to do was add
position:absolute;
To the #banner code.
Related
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.
Some time ago I started studying HTML and CSS. For purposes of study and practice, I am trying to create a simple web application of a game. The main interface of my application is very simple, containing only a header, a content area with login, and a footer. For purposes of demonstrating how I want my application looks like, here is a picture:
IMAGE, MIRROR 1, MIRROR 2.
In my progress in the development of HTML page with styling, I just running into this:
IMAGE, MIRROR 1, MIRROR 2.
What's bothering me now is because of the large white space that appears. I wish this place would go away, and that the background occupy it (the "conteudo" div). Here is the body of my HTML document:
<div id="conteiner">
<!-- CABEÇALHO -->
<div id="cabecalho">
<div class="centro">
<div id="logo">
BANCO DE DADOS <span>- FINAL FANTASY VIII</span>
</div>
</div>
</div>
<!-- CONTEÚDO -->
<div id="conteudo">
<div class="centro">
CONTEÚDO
</div>
</div>
<!-- RODAPÉ -->
<div id="rodape">
<div class="centro">
<div id="rodape-imagem">
<img src="recursos/imagens/griever.png" alt=""/>
</div>
<div id="rodape-autor">
DESENVOLVIDO POR <span>R.D.S.</span>
</div>
</div>
</div>
</div>
And here is my CSS stylesheet:
#font-face
{
font-family: "Runic";
src: url(../recursos/fontes/RUNIC.TTF);
}
*
{
margin: 0;
padding: 0;
}
html , body
{
height:100%;
}
#conteiner
{
min-height: 100%;
position: relative;
}
#cabecalho
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
height: 100px;
}
#logo
{
font-family: Runic;
font-size: 30px;
color: white;
line-height: 100px;
}
#logo span
{
color: rgb(153,179,206);
}
#conteudo
{
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
height: 200px;
}
#rodape
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
width: 100%;
height: 75px;
position: absolute;
bottom: 0;
left: 0;
}
#rodape-imagem
{
float: left;
position: relative;
left: 15px;
}
#rodape-autor
{
font-family: EngraversGothic BT;
color: rgb(153,179,206);
position: relative;
left: 30px;
line-height: 75px;
}
#rodape-autor span
{
color: white;
}
.centro
{
width: 900px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
border: 1px solid white;
}
Can anyone help me on this, and explain the reason for such possible solution?
Thanks!
EDIT - (20/03/2014)
I guess my question was not clear enough, so I'm editing to make it more clear and susceptible to a better understanding and resolution.
If you look at the second picture you will see a blank space. I wish this place was filled by the background of the div "conteudo". This div paints a background with a linear gradient. My intention is to make this div always placed after the header (cabecalho), and always has the size limit to the footer (rodape), ie, its height is over when the footer begins. It should stay that way even if the user resize the page. This feature would be possible to be implemented?
I modified "container" and "content" as follows:
/* ROOT */
#conteiner
{
height: 100%;
position: relative;
}
/* CONTENT */
#conteudo
{
height: 100%;
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
border: 1px solid red;
}
My background had increased height, however, it surpassed the footer, completely losing its layout.
Are you referring to the white space above the footer? If so, that's because you are giving the footer position:absolute. So it will stick to the bottom of the container with relative position.
The key concept here is Visual formatting model, learn more about it and you will solve your mysterious problem.
The plain solution is: give your content div a fixed height.
I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):
Everything is done except the background!
The quotation is different each time, so the background needs to automatically adjust in height.
It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.
Here's my current code - now on JSFiddle:
HTML
<div id="ehs-quotecontainer">
<div id="ehs-bgleft">
</div>
<div id="ehs-bgright">
</div>
<div class="ehs-marks" id="ehs-marktop">
“
</div>
<span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
<div class="ehs-marks" id="ehs-markbottom">
”
</div>
</div>
CSS
#ehs-quotecontainer {
padding-top:8px;
padding-bottom:8px;
background-color:#F7F8FA;
text-align:center;
}
#ehs-bgleft {
background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
height:20px;
color:#8B8C90;
font-size:5.0em;
}
#ehs-marktop {
float:left;
margin-top:-18px;
}
#ehs-markbottom {
float:right;
margin-top:-5px;
}
.ehs-quotetext {
padding-left:4px;
padding-right:4px;
color:#000;
font-size:1.1em;
font-style:italic;
}
Any ideas on how to make the background work correctly?
The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.
After that what you ask is fairly easy to do:
http://jsfiddle.net/7GEah/1/
Something like this: http://www.webdevout.net/test?012&raw
<!doctype html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<style>
body {
background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
margin: 71px 8px 8px;
}
.quote {
border: 1px solid #dfdfdf;
position: relative;
padding: 8px 35px;
}
.quote
p {
margin: 0;
font: italic 12px sans-serif;
text-align: center;
position: relative;
z-index: 1;
}
.quote .w,
.quote .e {
position: absolute;
top: 0;
width: 75px;
height: 100%;
background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote
span {
color: #898a8e;
font: 70px/70px allerta, serif;
position: absolute;
}
.quote
.ldquo {
left: -35px;
top: -15px;
}
.quote
.rdquo {
right: -35px;
bottom: -42px;
}
</style>
</head>
<body>
<div style="width: 209px;">
<div class="quote">
<p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
<div class="w"></div>
<div class="e"></div>
</div>
</div>
</body>
</html>
Could you create a single image, with the gradient meeting in the middle? If so, you can use:
#ehs-quotecontainer {
background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}
Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.
I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.
i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .
so here you will :
you keep the background with the quotation marks as it is
Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
Thanks!
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Both background images are very wide (~2000px) so as to take up space on any sized browser.
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
#wrapper {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
It'll work with
background-position-x: 50%;
background-position-y: 0%;
and still add
background-position: center top;
for other browsers.
Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)
This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.
Create a wrapper ID to place in the body, then include the following CSS:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.
I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?
Can someone point me in the right direction? I don't see why I can't get the black_bottom.png as background in rounded corners.
#charset "utf-8";
/* CSS Document */
html,
body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;
}
.justyParagraph {
text-align: justify;
}
a img {
border: 0;
}
.clearer {
clear: both;
}
.rounded_corners {
background: url(../images/box/black_bottom.png) no-repeat left bottom;
color: #FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
<div id="blockdark">
<div class="rounded_corners">
Content
</div>
</div>
This is an example, maybe it has something to do with the JavaScript for rounded_corners class?
http://www.coldcharlie.nl/test
Be sure that ../images/box/black_bottom.png is the path from your stylesheet to the image file. Everything else looks correct, but people don't always realize that paths are relative to the css file and not the page that includes it.
Try an absolute URL there and see if it appears then. If it does, you know your relative URL isn't right.
EITHER:
Your image doesn't exist at this relative path: ../images/box/black_bottom.png.
OR:
Your image is blank.
OR:
Your image has more blank space in the image's left bottom corner than the dimensions of your div.rounded_corners, and therefore the background image "overshoots" your div.
HI...
This might give you something to have a look at...
<html>
<head>
<style type="text/css">
#mydiv{
background-image:url('http://www.theregister.co.uk/Design/graphics/std/logo_414_80.png');
}
</style>
</head>
<body>
<div id="mydiv">
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
</div>
</body>
</html>
Just something to get you started.
Also, your div#blockdark doesn't validate - use #blockdark instead...
(The id should be unique, so tag type doesn't matter)