I'm trying to figure out how to use CSS Sprites on a sprite image with 4 sprites.
I have code to show the first two sprites. I have trouble with writing code to show the last two sprites. I am also unable to show the third and 4th sprites by themselves.
This is the image:
How to show the last two?
How to show the 3rd and 4th sprite by themselves?
HTML
<div class="container">
<ul>
<li id="belt-1"></li>
<li id="belt-2"></li>
<li id="belt-3"></li>
<li id="belt-4"></li>
</ul>
</div>
CSS
.container {
position: relative;
width: 600px;
height: 600px;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
}
.container ul li {
background-image: url(https://i.stack.imgur.com/SBxX4.png);
margin-bottom: 20px;
width: 150px;
height: 78px;
background-size: auto 286px;
background-position: 0 0;
}
.container ul li#belt-2 {
background-position-y: 210px;
}
.container ul li#belt-3 {
background-position-y: 123px;
height: 58px;
}
.container ul li#belt-4 {
background-position-y: 66px;
height: 58px;
}
Always Remember all images in CSS sprites, should have same canvas size
I create a basic example of CSS sprites, I hope this will help you.
Here's a very simple example with the last two images. I recommend you to play around in this fiddle with .block's width, height, and background-position. The last two numbers in the background property allows you to define how many images will appear.
.container {
position: relative;
width: 600px;
height: 600px;
}
.container .block {
background: url(https://i.stack.imgur.com/SBxX4.png) -85px -420px;
width: 310px;
height: 250px;
}
<div class="container">
<div class="block">
</div>
</div>
You can play around with it on JSFiddle
Related
I have a weird shape svg that I cannot edit, is there a way to rotate and crop a piece of it and use it as a background image with CSS? It doesn't necessarily have to be a background image as long as its location stays intact on mobile.
This is my code:
<section id="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">Get scholarship alerts by providing your info:</h4>
<form class="" action="index.html" method="post">
</form>
</div>
</div>
</div>
and this is my CSS:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
width: 60px;
height: 100%;
right: 0;
top: 0;
}
With this Pseudo element it looks okay but it doesn't look like the mockup.
This is how it looks with my code:
And this is the mockup and how it should look:
This is the actual SVG file: https://svgshare.com/i/SN2.svg
Hello this is what I got, I think this is what you want to achieve?
No change was made in the HTML, the CSS changed like this:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
overflow: hidden;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
width: 100vh;
height: 60px;
right: 0;
bottom: 0;
transform-origin: bottom right;
transform: scaleY(-1) rotate(-90deg);
}
Basically I rotated and flipped the after pseudo-element and played around with the background (I would imagine a shorthand can be used there)
I also added overflow: hidden; to make sure the SVG doesn't go outside the container
You can check out my solution here: https://jsfiddle.net/h7k2eosx/5/
Note that this can present issues depending on the screen size but this should be enough to get you going I hope :)
If your design allows it you could position the after pseudo-element with a fixed position, that would work nicely :)
( like here: https://jsfiddle.net/Ltamj8r6/ )
I have a grid of pictures that displays fine by themselves, but I cannot place this grid next to a sidebar.
To build the grid, I place the pictures in an <ul>, and set the property for <li> display: inline-block.
When trying to incorporate this grid next to a sidebar div, it is not placed to the sidebar's side; instead, it goes under the sidebar. Placing text does what I want. Now, when I omit display and float on the <li>, the pictures show up in the right place (next to the sidebar), but I want the pictures displayed in a grid, not a single column.
JSFIDDLE LIVE DEMO
Here's my CSS
ul.cats li {
width: 200px;
display: inline-block;
/* will not display to the right of sidebar */
/* float: left; */
/* no good either */
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border: 1px solid black;
}
.site_body_container {
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.site_sidebar {
position: relative;
float: left;
height: 95%;
color: white;
}
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
}
and HTML
<div class="site_body_container">
<div class="site_sidebar">
<ul>
<li>Sidebar 1</li>
... etc ...
</ul>
</div>
<div class="site_content">cats
<div class="container">
<div id="links">
<ul class="cats">
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
</li>
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
... etc ...
</li>
</ul>
</div>
</div>
</div>
</div>
You need to explicitly set the width of the container holding the pictures, something like:
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
width: 450px;
}
Otherwise, it will take up the whole width, which causes it to break onto the next line, underneath the left sidebar.
Here's a fiddle: http://jsfiddle.net/9Wg3T/8/
After a bit more searching I found an alternate solution which is what I am currently using.
I can make the sidebar's width variable (determined by the size of its contents) and the "cats" gallery take up the remaining width to the sidebar's right:
.site_sidebar {
position: relative;
float: left;
height: 95%;
background-color: #eeffff;
padding: 0;
}
.site_content {
position: relative;
padding: 0;
overflow: hidden;
}
The trick is setting .site_content's overflow to hidden. Explanation in this answer.
I'm not entirely sure what I'm after is possible but at present I have an unordered list when in desktop mode will use display: inline-block to display two images horizontally. However when in tablet/portrait mode, display switches to block to make the unordered list display vertically in the usual manner.
However complicating matters, I have two small background images which I want to overlay over each of the main images. I have used absolute positioning to achieve this however when switching to portrait form (width < 750px), the second main image overlays over the first.
Presumably this is due primarily due to the move away from display: inline-block and the continued use of relative/absolute positioning for the main background image and small background images respectively.
I have remedied this to an extent by giving each li element a specific height (500px), however the intention is that the two lis stick together, when by using a fixed height a gap eventually appears (owing to each li having a width of 100% (so regardless of tablet/phone size, the image will fill the container)).
My first thought was that height: 100% would be suitable but this simply results in the second li overlaying the first.
You can see what I am intending in the below Codepen link if my garbled text is unclear (highly likely). Any guidance on ensuring that the two li elements remain together would be gratefully received. Even if it is to say that the intended effect is not possible! There's also a brief diagram below.
http://codepen.io/grabeh/pen/uInrk
HTML:
<ul class="photo-list">
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/500"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/501"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
</ul>
CSS:
.photo-list {
list-style: none;
padding: 0;
margin: 0;
}
.photo-list li {
margin: 10px 10px 10px 0;
display:inline-block;
width: 48%;
}
.photo-list li:last-of-type {
margin: 10px 0 10px 0;
}
img {
border: none;
width: 100%;
}
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
position: absolute;
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
height: 500px;
}
}
http://jsfiddle.net/xdXv2/
Your main image doesn't have to be absolute positioned. Only the smaller images do since they have to sit on top of it. Putting your main image back into the document flow will give your list items height again, which means you no longer need to give them a fixed height.
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
top:0; /*added this*/
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
/*removed absolute position here*/
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
top:0; /*added this*/
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
/*removed fixed height here*/
}
}
Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on
this problem.
90% of the answers and books give this background trick which didn't help me.
My code - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
And I want it to look like this:
I followed this guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
Try something like this:
FIDDLE
Markup:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}
I am constructing a website based off the 1140 CSS Grid, which is an entirely fluid grid set to a max-width of 1140px. I have laid what is going to become a nav bar over this layer that extends five pixels further on each side (for everyone's favorite 'ribbon' design effect) and would like the middle 1140px (of the now 1150px nav) to be adjust width along with the grid below it. Everything I have tried thus far, however, has not worked. Anyone have any ideas?
HTML:
<div class="float">
<div class="nav">
<div class="navleft">
<img src="images/banneredgel.png"/>
</div>
<div class="navbar">
</div>
<div class="navright">
<img src="images/banneredger.png"/>
</div>
</div>
</div>
CSS:
.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}
.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.navleft {
float: left;
width: 5px;
height: 43px;
}
.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}
.navright {
float: left;
width: 5px;
height: 43px;
}
I created a JS fiddle with your answer. http://jsfiddle.net/thinkingsites/Vz4TC/3/
Your problem is that the width 100% doesn't allow for the two bits on the side, so when your page shrinks it wraps the children of .nav
What I did was position them absolutely in .nav and gave .navbar a left and right margin to allow for the ribbons WITHOUT setting it to width:100% as that would push the ribbons away. I've also set the max width of .nav to 800 and the nav never expands beyond that.
I was able to take the code Thinking Sites offered and altered it a number of lines more in order to get something that hovers over the center while the width is less than the browser (ribbons on the edges) and then turns into a bar when the site fluidly adjusts to a smaller browser width.
HTML:
<div class="float">
<div class="navleft">
<img src="images/banneredgel.png">
</div>
<div class="navbar">
<img src="images/logo.png" class="logo"/>
</div>
<div class="navright">
<img src="images/banneredger.png">
</div>
</div>
CSS:
.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}
.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}
.navright,.navleft {
width: 5px;
height: 43px;
position: absolute;
top: 0px;
}
.navleft{
left: -5px;
}
.navright{
right: -5px;
}