I have a menu on which I have to make a hover effect, that can't be drawn by css, so I have use it as a picture. My menu objects are <li> objects with different sizes,
and I cant understand how can I make the different sized images fit in <li> because the <li> objects don't have a defined width.
My code is as follows:
ul li:hover{
background:url('../images/hover.jpg');
width:100%;
}
but it sets the picture to <ul> size and repeats it over and over
Alternatively, you could use #font-face to include a font that has support for those characters, and have the menu items using that font. Then you could have something like:
ul li:hover {
background-color: rgba(255, 255, 255, 0.1);
}
You can use
background-size: 100% 100%;
Demo
Learn more about background
I've found the solution. I cropped the mid part of the hover image, and cropped the end and the start. i used the mid as background and set on repeat, then put 2 divs with end at start with position:absolute and left:0px; and right:0px; worked like a charm
Related
I have a navbar with links using a 1px wide, no-repeat, right-aligned background image as a divider, but for some reason the background image doesn't appear for one of the links in Chrome - in this case between "Athletics" and "Bowling".
It works in Firefox and Explorer, when zooming in and out in Chrome, when changing the font-size, when reducing the character length of the link, etc. so I believe it has something to do with how Chrome renders the background image.
I have tried different suggestions such as setting the background-size to contain/cover/100% and image-rendering to pixelated (supposedly this only targets regular images and not background images), but I can't get it to work.
How can I ensure that all background images are displayed correctly in Chrome?
CSS
ul {
display:flex;
list-style:none;
}
ul a {
background:url(sports-div.png) right bottom no-repeat;
display:inline-block;
font-family:sans-serif;
font-size:13px;
padding:5px;
}
HTML
<ul>
<li>Football</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Ice hockey</li>
<li>Volleyball</li>
<li>Badminton</li>
<li>Snooker</li>
<li>Athletics</li>
<li>Bowling</li>
<li>Cycling</li>
</ul>
http://jsfiddle.net/zc29b8no/1/
The technical explanation is rather long and boring.
But, the gist of it is: it has to do with subpixel rendering.
Your anchors' dimensions are not clear cut pixels and the browser needs to approximate what to render in each pixel. Your 1px image falls on the wrong side of rounding. To make sure it renders inside the element's painted background, you need to replace the right alignment in background-position (which translates to 100%) with calc(100% - 1px):
ul {
display:flex;
list-style:none;
}
ul a {
background:url(https://i.imgur.com/mCra304.png) calc(100% - 1px) bottom no-repeat;
display:inline-block;
font-family:sans-serif;
font-size:13px;
padding:5px;
}
<ul>
<li>Football</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Ice hockey</li>
<li>Volleyball</li>
<li>Badminton</li>
<li>Snooker</li>
<li>Athletics</li>
<li>Bowling</li>
<li>Cycling</li>
</ul>
Another solution would be to make the image 2px wide, but it might still have variable width.
I am working on this test page.
Scroll the page. The logo stays fixed on the background and this area I painted with purple scrolls over it. I made it purple just so I can see.
I am trying to make this area I painted with purple partially transparent, so I can see the background logo behind, as I scroll, like the purple area was a semi-transparent glass. The color is (255,0,255,0.6) and is defined on the secundario.css styles as
body.index #main {
padding-top: 5em;
background-color: rgba(255, 0, 255, 0.6);
}
Whatever I do, I cannot make this purple area semi-transparent. It stays opaque.
Any ideas? Thanks in advance.
I see that you found an alternative, but in case you are still wondering, I found your problem:
You have the background image as part of your banner section, which is a sibling to main (so, even if it looks like it, they do NOT overlap). If you want to see the image, you need to place it in one of the containers underneath, either page-wrapper or directly on the body.
The transparency works, you just can get different color results depends on element's color under the target with your rgba. Try to change background-color: rgba(255,0,255,0.6); to background-color: rgba(255,0,255,0.1); for example and you will see the difference.
Try using this
body.index #main {
opacity: 0.5;
padding-top: 5em;
background-color: rgba(255,0,255,0.6);
}
The transparency works, ok, but there is nothing below the purple area (just a blank page). You have set the logo background on your page header but that ends where your purple area starts.
The best would probably be to set the background on the #page-wrapper or similar parent element.
If you just want your element to be transparent, it's really as easy as :
background-color: transparent;
But if you want it to be in colors, you can use:
background-color: rgba(255,0,255,0.6);
https://www.w3schools.com/css/css_image_transparency.asp
I have discovered how to do it. I need to assign it to an independent id, not to a regular style.
Something is probably interfering with the current #main id, so, by creating a new one the problem is solved.
Thanks guys!
I have seen a few that explains how to do it with absolute position. I'm currently making a Bootstrap 3 site, so I cannot use the absolute attribute.
Below is a quick mock-up of what I'm talking about (note that the play buttons won't be burned into the images below)
Also, if you could explain how to make a similar gradient, it would be nice.
I have tried to use the z-index attribute, but when using it I couldn't figure out how to position the elements relative to elements with lower z-indexes.
Edit:
The play-button (seen on top of the images) will not be a part of the jpg image asset. Rather, it will be its own svg asset put on top of the jpg (thumbnail) image. I choose this way so that I can animate the "play-button" independently.
Neither will the gradient, title, subtitle or "article-tag" be a part of the thumbnail image asset.
The red "divider's" will be its own svg asset as well.
Ideally, I would like to be able to place <img></img> objects on top of another <img></img> bounding box and be able to move it relative to the bounding box. eg x=50% y=50% for centering. The method should be scalable so that I can have more than two layers as well as having multiple objects on the same layer.
Note: The thumbnail images will be stored on the web server in a resolution of 1920x1080. When trying to use the "divider" as a background image I had a clipping issue:
It wouldn't expand its parent <div>. (also, is there a way to detect user's screen size and rescale the pictures accordingly (on the server) in order to increase loading speed? Like a cookie or something?)
I'm sorry for probably breaking tons of rules on the site, this is my first question.
regarding the gradient, a short css writing will be:
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
In addition: I've created a JSFiddle for you for the layouting :)
HTML:
<div class="relative-container">
<div class="absolute-container">
<div class="flex-1">
Img 1
</div>
<div class="flex-1">
Img 2
</div>
<div class="flex-1">
Img 3
</div>
</div>
</div>
CSS:
.relative-container{
width:300px;
height:200px;
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
}
.absolute-container{
width:300px;
height:100px;
display:flex;
align-items: center;
position:absolute;
top:55px;
}
.flex-1{
flex:1;
border:1px dashed black;
text-align:center;
}
I came accross this problem while adding anchor elements to a section for a menu. I want each element to display a transparent block of color behind it when the mouse is hovering over. At the same time, I want the page background to have stripes from CSS (background: linear-gradient; or background:repeating-linear-gradient;) (I run into this problem with either). When I have a link on top of these vertical stripes and I hover over it, the underlying stripes are shifted in one direction by about a pixel. Its a very small effect but none-the-less frustrating. I have removed all other elements from the html and css that are not involved in this issue and placed the resulting files in this jsfiddle: http://jsfiddle.net/bw9fk0y4/5/
body {
margin: 0px;
padding: 0px;
background:
repeating-linear-gradient(90deg,transparent, transparent 2%, rgba(0,0,250,0.2) 2%, rgba(0,0,250,0.2) 4%, transparent 4%);
}
div nav{
position: relative;
left: 250px;
}
div nav a{
margin: 5px;
display: inline-block;
padding: 10px;
}
div nav a:hover{
background-color: rgba(250,250,250,0.4);
}
<body>
<div id = "container">
<nav>
link 1
</nav>
</div>
</body>
What I have found is that for some reason I don't run into this effect when the anchor is further to the right of this page. If it is centered or closer to the left side or even centered I do have this effect, even if I position it by setting a fixed width and the in CSS (margin: 0 auto;). If anyone knows of a way to aleviate this problem I would be very happy. This is only happening in chrome. I've tried using the browser specific gradients, no difference. I am afraid that this is just a result of CSS gradients not behaving well, because they seem to misbehave quite easily when played around with, but they are too convenient for me to give up on them easily.
I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}
assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}
The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.