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
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.
I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?
Here is HTML
<a id="arrow">List</a>
CSS
a#arrow {
background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
}
Here is jsfiddle link
You can put your background to the :after element as a method
CSS
#arrow:after {
content:'';/*enable after element*/
position: absolute;
top: px;/*position of the background*/
left: px;/*position of the background*/
background: url(img/your-bg.png) no-repeat;
width: px;/*width of the background*/
height: px;/*height of the background*/
}
And dont forget to add position:relative to the #arrow
You can use background position to view your image.
here is fiddle
Your css should be
a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}
Use background-position property with values in pixels to show them on top.
For instance,
background-position: xxpx (for left-right) xxpx (for top-bottom);
PS: xx is a dummy value, which you can replace with actual numbers.
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%.
Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.
http://lapalomafunrun.com/
Here is the code I'm using:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}
The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
background-size: 100% 63px;
}
I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>