I am working on a draft version of my website which uses a more responsive design than the original and have encountered a problem making my CSS rollover effect navbar buttons resize properly. I can get the divs to resize ok but not the .png images themselves.
Below is the code for the "Home" button. I set the div to resize to 11.5% because when it is displayed next to the other buttons they all have unique sizes and fit nicely within the parent div.
Any help much appreciated :) thanks for looking!
#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;
}
#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;
}
#homebut: span
{
position:absolute;
top: -999em;
}
As comments background-size:100% auto;
#homebut {
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:100% auto;
}
Try background-size: cover;.
Cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
Related
I have a background image, I am trying to put the button at the middle bottom somewhere. But when I move the browser to the left or side of the screen, the button moves around slightly. But I want it to stay exactly where it was before. Can somebody tell me what I am doing wrong?
Here is my CSS at below.
body
{
margin:0;
padding :0;
background:url(ht.JPG);
background-attachment: fixed;
background-position: 50% 50%;
background-size:cover;
background-repeat: no-repeat;
font-family:sans-serif;
}
#loginbutton
{
font-weight: bold;
font-size:18px;
opacity:0.6;
align-items: center;
text-align:center;
border:none;
height:100px;
width:100px;
border-radius: 50%;
background:transparent;
color:black;
background-color:#EAEAEA;
position: absolute;
top:69%;
left:45%;
}
Below is my button at the html.
Login</button>
I tried fitting the background image to window height:
[https://jsfiddle.net/n09sos3c/3/][1]
Note that this will not ensure on very small window resolutions the button will still not fit at the right place, since the image will shrink but button won't.
You can learn about background shorthand here: https://css-tricks.com/almanac/properties/b/background/
Hello there I am a bit confused by the behaviour on a responsive CSS background image in IE11/Safari 5 which works well in Chrome and Firefox:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: contain;
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
The thing is that the svg background image is perfectly contained within the dynamically scaled div (which has a width/height in percent), but in IE and Safari it is always displayed LEFT instead of RIGHT when scaling.
Is there a solution to this?
Your code:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: contain; /* thats wrong */
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
Change:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: 100% 100%; /* full size background */
background-origin: content-box; /* this placing the background the words place (content-box) */
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
After looking for a few solutions here it seems everyone has the opposite problem that I'm facing (ha!). Here's what I'm trying to accomplish: I have a DIV that on page load is 100% width and 100% height. This is so that no mater the screen size we always get a full homepage image. However, we want to be able to scroll below that for additional content. I'm at a point where I have rigged it to work a bit but it's glitchy. Here's the HTML ::
<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>
You can see here that "BlockWhite" is styled to be 1000px tall. That's because it get's hidden behind the "ScalableImage". I can't get it to nest below!!!
Anyways, here's the CSS for the ScalableImage and the color blocks ::
#ScalableImage {
position: absolute;
display:block;
top:0;
left:0;
width:100%;
height:100%;
max-height:900px;
background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
}
#BlockBlue1 {
position:relative;
float:left;
background-color:#c5d1d1;
width:110%;
margin-left:-10px;
margin-bottom:-10px;
min-height:20px;
clear:both;
}
#BlockBlue2 {
position:relative;
float:left;
background-color:#95aab2;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}
#BlockWhite {
position:relative;
float:left;
background-color: #fff;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}
Ideas?
Thanks!
The reason why "#ScalableImage" overlaps "#BlockBlue1" is because you have position: absolute in your styling of "#ScalableImage" - so it gets pulled out of the layout, and as such covers other elements.
To achieve what (I think) you're looking for, you may want to remove that position:absolute style, then add:
body, html{
height:100%;
margin:0;
}
(The 0 margin is just in case the browser renders the body/html elements with a margin.)
I hope this is helpful for you. Good luck!
(Edit) Added a JSFiddle to show you what I'm seeing: http://jsfiddle.net/BDd62/
(Edit 2) Having seen your additional code, I think I've identified the reason for that white space. It's because of your top margin on "#htxt", which actually moves its parent element in this case. (You can read a more in-depth explanation of which this happens here. You can avoid this in a couple ways, but here are the changed areas in your CSS that I made. If this isn't the layout you wanted, please let me know:
#bg {
display:block;
width:100%;
height:100%;
max-height:900px;
background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
}
#htxt {
position:relative;
font-family: 'Raleway';
font-weight:bold;
font-size: 6em;
text-align:center;
color:#FFF;
width:80%;
max-width:960px;
line-height:100px;
margin:0 auto 22%;
padding:22% 0 0;
z-index:800;
}
#hsubtxt {
position:relative;
font-family: 'Raleway';
font-size: 3em;
text-align:center;
color:#FFF;
width:80%;
margin:2% auto 0;
z-index:800;
}
Hope this helps you out! Here's your updated JSFiddle to see the full code, but I suggest running it in a full browser (since your layout isn't optimized for the small window size of the JSFiddle environment.
I have a jquery slider on my page which is centered when the page is wide enough to fit it yet aligns with the left edge of the window and shifts when the window is smaller. Below is my CSS - Am I missing something?
#billboardWrapper {height:600px;width:100%;margin:-170px 0 0 0px; position:relative; overflow:hidden; /*border-width: 0 20px 20px 20px; border-style:solid; border-color: {{settings.billboard_color}}; /* can't use border shorthand. IE9 has a rendering bug, see more notes in the ie8.css file */ }
#billboard {height:600px;width:1000px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1000px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:50px;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:right;}
Perhaps it is centered by chance on the larger screen.
Centering usually works when you have:
width: (any-FIXED-WIDTH-value); - Good spot Bram Vanroy ;)
margin: auto;
which I cannot see...
You should really add your HTML too, and if possible start a jsfiddle and include the link. This way other users can play with it and solve it for you, and we can understand your code better too.
Hope that helps
I've got a div that is fluid width depending on the browser. I have a border image that I want to have on both the left and right side of the div. How would I do that? I have the left side working as needed:
#conten {
background: #fff url(/images/pagebgleft.gif) top left repeat-y;
color: #333333;
float: none;
width: 80%;
max-width: 1080px;
margin: auto ;
}
I want to use an image url(/images/pagebgright.gif) for the right side. Thanks!
Use multiple backgrounds or put another wrapper div and set the right hand background to it.
I may have posted too late. Each border needs to be in it's own div and absolutely positioned inside a relative position container. The background image I'm using happens to be an animated border gif i got from google.
<div class="wrap">
<div class="leftb"></div>
<div class="rightb"></div>
</div>
.wrap{
position:absolute;
width:400px;
height:400px;
background:#ccc;
}
.leftb, .rightb{
position:absolute;
top:0;
background: transparent url(http://www.capriogroup.com/webstuff/Images/Borders/Animated-Border-ChainLinksVertical.gif) repeat-y 0 0;
color: #333333;
width: 20px;
height:400px;
}
.leftb {
left:0;
}
.rightb {
right:0;
}
Check working example at http://jsfiddle.net/ZxQ6Z/1/