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?
Related
I am trying to figure out why I can't see the image.
I am trying to add an image in the <li class="logo">PufferFish Divers</li> line, but I just see a black space.
When I inspect it, it is there, but I cannot get to see it.
header .logo a {
background-image: url("https://www.dropbox.com/s/ie6qd07mbmonjs1/sea10%20copia.jpeg?dl=0") ;
background-size: 300px;
display: inline-block;
height: 80px;
width: 300px;
text-indent: -999999999px;
}
Here's a codepen link.
here is the code. you can try this out. and you can refer enter link description here here for more details.
<html>
<head>
<style>
body {
background-image: url("https://uccf62af6085e46bfa876477ddd6.previews.dropboxusercontent.com/p/thumb/ABP0IK4DkxiZRD-oqNgvuM_MQx2MKut92ZE3MOLBMM2_aHYJ1Oz_fFc8c8B-zQ0R6PWpG8SlVUKL-hDW8HukOeP_nXbuZvH1XDQpMMEpDEFZgc7He81YmTuC1hE1V953GsqDwB9mZoR22b1VrWVxf0gmDyU8wv1x05cMbY8JDDqayTLMS0-S0_3mf7ELwNXB-FEacQjlV3KmTw82mpj1rx_N-rN9V4gT7-284Zo-A3_cBQ0ursYlyJ563tPMvzed852kpQJ5vp9Dwpf1mkEh1_xZAizECUuPvDZGc39xweogbwP_2blHPFW6wsu1xoffpb7Z3PPNz4tb2-EEcgJaT3SdfFVjHzXSoB0e4hF3Dy9dpbNcdTzmhDVp5rt6YKtbMCqBP2WNepm_EVDWH_VH4kW5/p.jpeg?fv_content=true&size_mode=5");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: 300px 100px;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
There is mistake in the image's url. It was just a letter, but made it impossible to reach.
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;
}
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.
The CSS -
#header {
overflow: hidden;
background: url(images/header-bg.png) top repeat-x #FFFFFF;
position: relative;
border: none;
display: block;
height: 125px;
width:100%;
}
The HTML -
<div id="header">
<img src="images/logo.png" alt="" />
</div>
This works good in Firefox -
But not in Chrome :( -
The image isn't being stretched vertically in Chrome.
Help!
Just a note, I'm on Linux.
Edit : The background image (50x112px) -
Check it out here - http://movie-buffs.info/
So chrome was automatically taking up background-size from another css file.
When I put
background-size: auto auto !important;
in #header,
the issue was gone.
Thanks everyone for help.
The shorthand you are using for background, is placing the color #FFFFFF in the last argument, it's supposed to be in the first. Try getting rid of the shorthand, so your code will look like this:
/* background: url(images/header-bg.png) top repeat-x #FFFFFF; */
background-image: url(images/header-bg.png);
background-repeat: repeat-x;
background-color: #fff;
background-position: top;
Shorthand order:
background-color, background-image, background-repeat, background-attachment, background-position
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?