Learning to use sprite menu right now by following a tutorial. But for some reason, Chrome is giving me a 'invalid property value' on some of the background-position lines. The first one, with position 0 0 works fine, but the other two with -33 0 and 0 -33 won't work, which means my site is only showing 1 button right now and the hover isn't applied. The picture I am using right now is 197x65
#sidebar .content .follow a {
display: block; float: left; height: 32px;
background-image: url('http://s23.postimg.org/8ltupgj0r/follow.png'); text-indent: -9999px;
margin-right: 5px;
}
#sidebar .content .follow a.fb {
width: 32px; background-position: 0 0; }
#sidebar .content .follow a.twit {
width: 32px; background-position: -33 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33; }
On the background-position properties you need to set what value type you are wanting, px, em, etc. CSS understands the 0 but you need to be more specific for the other values.
#sidebar .content .follow a.twit {
width: 32px; background-position: -33px 0; }
#sidebar .content .follow a.fb:hover {
background-position: 0 -33px; }
Related
I am trying to get a section up and running on my website. I want to add a background image instead of a color. I have tried reading here and other websites and nothing I try seems to work. I am using this section code:
https://codepen.io/ckor/pen/lBnxh
!* {
box-sizing: border-box;
}
ebody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
&:nth-of-type(2n) {
background-color: #D55B79;
}
}
.eintro {
height: 90vh;
}
.econtent {
display: table-cell;
vertical-align: middle;
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
e&:active {
top: 1px;
}
}
efooter {
padding: 1% 5%;
text-align:center;
background-color: #373B44;
color: white;
ea {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}
I have added this to the code:
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
The goal is to add images that are left or right justified and then add some text to the section. I am aiming for a left image then the next box is a right image and so on. I have seen the effect on other websites and it looks good if done correctly.
In order to add background image to any html element you will need the following line added to your css:
background-image: url("pathtoimage");
In your css code there is :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
this code here will fetch for all section html tags and apply to them the styles.
in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n
for example:
(1st section html element in your page) Section 1 will be color #373B44
(2nd section html element in your page) Section 2 will be color #FE4B74
(3rd section html element in your page) Section 3 will be color #373B44
(4th section html element in your page) Section 4 will be color #FE4B74
and so on
Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
/*added here*/
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
/*added here*/ }
section:nth-of-type(2n) {
background-color: #FE4B74;
}
However, now you have two problems :
1- same background image in all sections (no alternating)
2- the image might be too small , not fit or might be repeated in a bad looking way
so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}
section:nth-of-type(2n) {
background-color: #FE4B74;
/*this will overwrite the other background image for your 2n sections*/
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
In order to solve the 2nd issue , you might want to use the following:
background-repeat:no-repeat; /*removes repetition*/
background-size:cover; /*allows picture to take up whole section space*/
and the final code will look like this
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
To better understand the background properties in CSS , I would really suggest going into the following link :
https://www.w3schools.com/css/css_background.asp
And this link will help you understand the section:nth-of-type(2n)
https://www.w3schools.com/cssref/sel_nth-of-type.asp
The codepen link
https://codepen.io/sara-kat/pen/gKrVpg
Have a good day
There is a really simple solution to this, actually. The link to the image isn't working. You don't have to change anything about the rest.
I gave your second section the class bg and put your code to style that section in your CSS. It works if you use a working link:
Codepen
section.bg {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('//unsplash.it/1200/800');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
I need to create a tick in a checkbox using CSS and not an image.
I can see the green '✔' showing up correctly. but the top and left in css is just not working the tick sign is always stuck at the upper left corner at the checkbox and I want it at the middle. Why is the content and color property working but left and top not working?
Top and left doesn't work with static element, you need to specify a relative, fixed or absolute position in order to use these property. You can try this :
input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 15px;
left: 250px;
color: green;
position: relative;
}
A full code :
input[type=checkbox]:focus+.icon {
background-position: 0 -822px;
}
input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
background-position: 0 -856px;
background-color: #2196F3;
display: block;
}
input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 5px;
left: 50%;
margin-left:-12px;
color: green;
position:relative;
}
input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
background-position: 0 -890px;
}
,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
background-position: 0 15.3%;
}
&.hasError .icon {
background-position: 0 -890px;
}
<input type="checkbox" required="required" name="terms" id="termsAgree" auto-required="true">
<span class="icon"></span>
I have a paranormal site where each investigation write up has a rating. In this situation my client wants to use skulls (not that it really matters). The site address is:
http://theripfiles.tv/j3upgrade/index.php/case-files/season-1
I need to display the phrase "PAL Rating:" with 1 to 5 skull icons to the right of it.
I attached the image I'm using to the site page above.
Image dimensions:
width:102px
height 135px
5 rows of icons 27px in height
Top row has 5 icons. bottom row has 1 icon.
Here is what I have so far:
.pal-rating-static
{
background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
}
.pal-rating-5 { background-position: 0 0; }
.pal-rating-4 { background-position: -27px 0; }
.pal-rating-3 { background-position: -54px 0; }
.pal-rating-2 { background-position: -81px 0; }
.pal-rating-1 { background-position: -108px 0; }
I tried using similar CSS from this simple example but it doesn't seem to work. What am I missing?
http://www.itsalif.info/content/displaying-star-rating-using-css-sprites
On your site you have
.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
float: right;
}
Change that to
.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: inline-block;
}
i dont think you need to mess with background position for this one
.pal-rating-static {
background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
}
if this is your bar with 5 'skulls' visible . then all that you need to do is make the container smaller when you want to display less 'skulls'
you can do this by adding an extra CSS class for numer of 'skulls'
so you will end up with something like this
.pal-rating-static.cat1 {
width: 20px;
}
.pal-rating-static.cat2 {
width: 40px;
}
.pal-rating-static.cat3 {
width: 60px;
}
.pal-rating-static.cat4 {
width: 80px;
}
hopefully this will solve your problem .. a fiddle would be very useful
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).
I have a webdesign with a module (form). the design of the module in particular is image rounded corners (4 divs to wrap the form, the design is fluid).
My problem is that the module's width displays as expected in Chrome, Firefox, IN and Opera. But for some reason, this module displays much thinner in safari. All other elements are displayed with the same ratios, this module is the only discrepancy
In this image, I super imposed the safari browser on top and below the chrome module and you can see the variation, the lower browser is safari:
The CSS for this module is:
div#slideshow {
width: 100%;
margin: 0 auto;
float: left;
position: relative;
display: block;
}
/*slideshow newsletter module*/
div#slideshow div.moduletable_newsletter {
width: 25%;
min-width: 211px;
float: right;
margin: 5% 0; }
div#slideshow form#formAcymailing1 {
margin: 0 auto;
width: 92%; }
div.acymailing_module_form-ul {
width: 100%;
float: left;
background: url('../images/sprite.png') -10px -210px; }
div.acymailing_module_form-ur {
float: left;
background: url('../images/module-nwsltr-ur.png') no-repeat top right;
padding: 10px 0 0 0;
margin: 0 0 0 10px; }
div.acymailing_module_form-ll {
position: relative;
float: left;
background: url('../images/module-nwsltr-ll.png') no-repeat bottom left; padding: 0 0 0 10px;
margin: 0 0 0 -10px; }
div#slideshow div.acymailing_module_form {
float: left;
background: #f7f8ff url('../images/module-nwsltr-lr.png') no-repeat bottom right;
margin: 0;
padding: 0px 10px 0 0; }
div#slideshow div.acymailing_module_form table.acymailing_form {
width: 100%;
margin-top: 110px; }
What can I do to make the module display wider in safari?
Thank you,
(to view live: http://redesign.com.s136249.gridserver.com/ )