I am trying to figure out how to implement background crop like this in Compass sprite:
http://nicolasgallagher.com/css-background-image-hacks/
http://jsfiddle.net/blineberry/BhbrL/
This is what I have in .sass file:
#import "buttons/*.png"
#include all-buttons-sprites
.buttons-arrow
background-image: none
width: 30px
height: 45px
.buttons-arrow:before
+buttons-sprites(arrow)
display: block
content: ""
width: 15px
height: 27px
As you see, I tried to make .buttons-arrow without the background image first and then I added back the background-image. However, it gave me this .css file:
.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}
.buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow {
background-image: none;
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
display: block;
content: "";
width: 15px;
height: 27px;
}
.buttons-arrow:before .buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow:hover {
background-color: #ea4800;
}
Obviously it was wrong because it combined into this .buttons-arrow:before .buttons-arrow
I just want a simple result like this
.buttons-arrow {
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
background-image: url('../images/buttons-s5ae2b3a1e9.png');
display: block;
content: "";
height: 27px;
width: 15px;
How do I code this in Compass using sprite?
Since this place is pretty much dead, I do will a favor for people searching this from Google. The answer is:
Put this on top:
$buttons: sprite-map("buttons/*.png")
I have arrow.png and arrow_hover.png in there. The idea is to use sprite-map functions instead of #import all. Then make sure to include background image for the :before pseudo element but not original content:
.buttons-arrow
width: 50px
height: 50px
&::before
content: ""
background: sprite($buttons, arrow) no-repeat
display: block
position: relative
width: 20px
height: 20px
&:hover
background-color: gray
&::before
content: ""
background: sprite($buttons, arrow_hover) no-repeat
position: relative
width: 20px
height: 20px
Based on #HP answer, I could figure out how to make it work. Instead of
#include buttons-sprites(arrow)
just use
background: sprite($buttons-sprites, arrow);
This is very similar to the workaround #HP proposed, but instead of calling sprite-map I make use of the implicitly generated variable $buttons-sprites.
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'm going crazy here, have tried almost everything (including the things mentioned in the two other older threads about this topic). I simply want to add images instead of the arrows.
Here is my code:
.fp-controlArrow {
position: absolute;
width: auto;
height: 200px;
z-index: 4;
top: 50%;
cursor: pointer;
}
.fp-controlArrow.fp-prev {
left: 15px;
background: url(../images/left.png) no-repeat;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
Anybody who have got this to work? This should be easy but it isn't...
I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).
This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);
I have seen "Overriding HTML img with CSS" and "Resize image proportionally with CSS?", but neither of these helped me.
My large wallpaper image that is stuck beyond the size of my page and looks blurred.
I have tried using:
img.resize {
max-width:100%;
height: auto; }
On this type of code:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('WALLPAPER IMAGE URL') no-repeat fixed center;
cursor: url('CURSOR IMAGE URL'), url('IDK WHY cute25.cur IS HERE EITHER'), help;
div#mask cursor: not-allowed; z-index: 999; height: 100%; width: 100%; }
But No matter where I put image.resize I haven't gotten it to work.
Please help.
Regards, ~Serliek
Add this to your css
background-size:contain;
This is what the code should look like for my image to be normal size and not blurred:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('WALLPAPER IMAGE URL') no-repeat fixed center;
background-size:contain;
cursor: url('CURSOR IMAGE URL'), url('cute25.cur'), help;
div#mask cursor: not-allowed; z-index: 999; height: 100%; width: 100%; }
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