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/
Related
Im trying to make a 960px, float left website and using black transperent divs with text in them. The problem is that the text has the same color as the div, but I want it to be white or at least not the same as the div. How can i do this?
This is my CSS for the moment, the problem is that position is set to relative, but I just want to use diferent divs and use "float: left". If I remove "position: relative" the transparent color of the div disappears.
.content {
position:relative;
color:White;
z-index:10;
float: left;
text-align: center;
left: 365px;
font-family: Arial;
margin: 10px;
top: 15px;
}
.background {
position:absolute;
border-radius: 10px;
width:960px;
height: 70px;
background-color:Black;
z-index:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:.5;
top: 80px;
}
Use transparent background instead with:
background:rgba(0,0,0,0.5);
The content inherits the opacity of your container. Explicitly set the opacity of the content to not be .5 but 1.
This seems to be working fine, see the fiddle and tell me if it's working for you. I've changed the width to % but it works just as well on px, ijust wanted to remove the scrolling in the fiddle, and changed the Color:White; to color:#fff;
Fiddle
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.
This is what I'm trying to achieve, and have come pretty close:
This is my CSS:
li {
float: left;
position: relative;
padding-left: 55px;
background: url(../../images/separator.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 87px;
}
a {
font-size: 15px;
line-height: 67px;
}
I'm almost there, but there are a few problems. The only way I came up with to have the menu items vertically in the middle of the separators was to use line-height. But now of course when hovering over the links the hover is the height of the line-height, and I don't want that.
Also: is there a way to have the menu items go "inside" the separator images, like in the picture? The separator image is a transparent png. If not I'll just decrease the padding on the menu items to try and get them closer.
First method:
Give the link a height, position it 50% from the top, half the height back to top:
a {
font-size: 15px;
height:30px;
display:block;
position:relative;
top:50%;
margin-top:-15px;
}
Demo
http://jsbin.com/ovaqix/1/edit
Second Solution
Make the a element display:table-cell and same height as li, then use vertical-align:
a {
display:table-cell;
height:87px;
vertical-align:middle;
}
Demo
http://jsbin.com/ovaqix/2/edit
Table-cell doesnt work in IE7
Have you tried changing stating a height in a:hover ?
To have the menu items go inside the separators, I think that you need to create after and before pseudo elements, with the border hack to generate triangular shapes. Something in he line of:
a:before {
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid black;
}
If you provide more details, I can be more specific.
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 can't figure this out..hopefully someone else can.
I have an image button . The hover effect works fine. However, I have the IE broken image icon over the button image.
Lookie here: Funky Image Funky Image Hover
As you can see...they both work except for that annoying broken image.
Here's my CSS:
.donate-btn{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
overflow:hidden;
height:45px;
width:210px;
float:left;
}
.donate-btn:hover{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
height:45px;
width:210px;
background-position: 0 -45px;
}
This simply means you are referencing a non-existent image in the source attribute. You should consider using the actual <button> tag instead. It just needs a few extra style attributes to remove borders and padding:
.donate-btn{
background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat;
overflow:hidden;
height:45px;
width:210px;
border: none;
padding: 0;
float:left;
}
.donate-btn:hover{
background-position: 0 -45px;
}
I also simplied your CSS by removing some unnecessary styling in the hover state.
<button class="donate-btn" type="submit"></button>