I'm trying to create a dynamic icon using css sprites. here's what I keep getting:
So I actually have a couple of questions about what's going wrong:
Why is the icon (the box with the cross) not overlapping the purple boxes?
Why do the purple boxes have a 2px space between them?
EDIT
Here is a jsFiddle: http://jsfiddle.net/hWhUb/
here's the relavant css i'm using:
.icon {
position: relative;
width: 87px;
}
.icon .icon-type {
position: absolute;
left: 0;
}
.icon .brigade, .icon .icon-type {
background-image: url('img/play/splitbrigades.png');
}
.icon-hero {
width: 87px;
height: 71px;
background-position: -11px -11px;
background-repeat: no-repeat;
}
.brigade-purple-left {
width: 27px;
height: 71px;
background-position: -287px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-middle {
width: 30px;
height: 71px;
background-position: -334px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-right {
width: 28px;
height: 71px;
background-position: -384px -12px;
display: inline-block;
background-repeat: no-repeat;
}
and the html:
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle" style="width: 22px;"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
can anyone explain to me what I'm doing wrong, and possibly how I could achieve my result in a better way (if possible)?
add float: left to .icon .brigade
.icon .brigade {
float: left;
margin: 0;
}
this should fix everything you need or get you in the right place to finish it off!
the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.
the icon is not rendered "above" the boxes because it's missing the top: 0; declaration
You should use this. It must contain top.
.icon .icon-type { position: absolute; left: 0; top:0}
Live :
http://jsfiddle.net/hWhUb/1/
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'm somewhat new to html but im tyring to have a transparent background image and in the body have div containers that show the background image just not transparently.
I want to say, "do the opposite", but I really need more information (or an example).
If you used one background image and set specific classes up for the divs that can see the image, would you be able to get the effect you want?
CSS example:
html body { background-image: url("myimage.jpg"); }
div { background: #FFFFFF; }
.peek { background: transparent; }
HTML example:
<body>
<div> section with white background (blocks the background image), contains text </div>
<div class="peek"> section that exposes the background image, reveals different aspects of the background when the page is scrolled </div>
Please let me know if I understood what your goal was.
To my understanding you're looking for something like this:
<style>
* {
color: white;
}
.background {
width: 100%;
height: 100%;
position: relative;
background-image: url('https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.side {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.main {
width: 60%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: transparent;
}
.top, .spacer, .bottom {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.content {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
}
.section-one {
background-color: rgba(0,0,0,0.5);
}
.section-two {
background-color: rgba(0,0,0,0.25);
}
</style>
<div class="background">
<div class="side">THIS IS WHITE</div>
<div class="main">
<div class="top">THIS IS WHITE</div>
<div class="content section-one">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="spacer">THIS IS WHITE</div>
<div class="content section-two">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="bottom">THIS IS WHITE</div>
</div>
<div class="side">THIS IS WHITE</div>
</div>
I have 3 sections that their parents is only the body, section 2 (menu) background in this case is larger than 100vh. Giving the height:auto; won't work, I would like to stretch the height of the section according to the background length ( auto ), I don't want to give it a specific value using ( px, vh, cm, ... etc). I'm pretty sure it's simple answer but I couldn't figure it out my self. Thank you
html,body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(/images/Header.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
height: auto;
width: 100vw;
background-image: url(/images/Menu.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<html>
<body>
<section id="Home"></section>
<section id="Menu"></section>
<section id="Map"></section>
</body>
</html>
The only way you can achieve this is by not using the actual background property.
As #Mr Lister commented:
There is no way for an element to know the height of a background
image.
However, you can use an img tag with the image you want as background inside your #menu section.
Then, create a container div with absolute positioning which will contain the content of your actual section.
html,
body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(http://i.imgur.com/8tcxHWh.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
width: 100vw;
}
.content {
position: absolute;
left: 0;
top: 0;
}
h2 {
color: white;
font-size: 4em;
}
<section id="Home"></section>
<section id="Menu">
<img src="http://i.imgur.com/BF3ty6o.jpg">
<div class="content">
<h2>My content</h2>
</div>
</section>
<section id="Map"></section>
Received a two column layout design for a website. Each column has a transparent background that, combined, forms a curved cut-out at the top.
I need the columns to grow with content, however this distorts the background image when set on background-size: cover (Matching things up in order to use repeat-y won't work either). Is there a good way to accomplish this, or a way to tell him absolutely not?
.middle-left-container {
float: left;
min-height: 500px;
position: relative;
left: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png');
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
body:not(.home) .middle-left-container {
top: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png');
}
.middle-right-container {
float: left;
min-height: 500px;
position: relative;
top: 0;
right: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 80%;
}
body:not(.home) .middle-right-container {
background-image: none;
background-color: #fff;
}
Thanks,
Matt
Don't put the curved bg image on the <body>, put it on a fixed-width container, then anchor the bg-image position.
.container {
width:900px;
margin:0 auto;
background-position: top center;
...
}
Then inside that container, put each of your column containers. Something like:
<div class="container">
<div class="sidebar-nav"> ... </div>
<div class="middle-left-container"> ... </div>
<div class="middle-right-container"> ... </div>
</div>
I have 2 wrappers, one inside the other, as per html below. The first wrapper contains a tile which scrolls down. Wrapper 2 has an image 940 X295px. Works beautifully in IE5 & IE8, but in IE7 the footer jumps up to wrapper2 and the text extends down, underneath and below.
This is my html:
<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>
I have moved the closing div's everwhere with no success.
My css for the above divs are:
body {
margin-top: 0px;
padding-top: 0px;
background-image: url(../images/body_vert_tile.gif);
background-color: #C8BE86;
background-repeat: repeat-x;
}
#wrapper {
background-attachment: scroll;
background-image: url(../images/wrapper_horiz_tile.gif);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
width: 940px;
}
#wrapper2 {
background-image: url(../images/wrapper_2.jpg);
height: 295px;
margin-right: auto;
margin-left: auto;
background-position: left top;
}
#header {
width: 940px;
background-image: url(../images/header.jpg);
height: 345px;
margin-right: auto;
margin-left: auto;
}
#maincontent {
float: right;
width: 630px;
padding-right: 70px;
padding-left: 10px;
margin-top: -10px;
}
#maincontent_home {
float: right;
width: 420px;
padding-right: 10px;
padding-left: 10px;
margin-top: -10px;
}
#secondary_content {
float: right;
width: 190px;
padding-right: 70px;
margin-top: 30px;
padding-left: 20px;
}
#footer {
background-repeat: no-repeat;
background-position: left bottom;
width: 940px;
text-align: center;
clear: right;
background-image: url(../images/footer.jpg);
height: 145px;
margin-right: auto;
margin-left: auto;
#navigation {
float: right;
width: 130px;
padding-right: 10px;
padding-bottom: 10px;
background-repeat: repeat-y;
background-position: right top;
padding-top: 5px;
}
I'm pulling my hair out. Should I just ignore IE7? I'd really like to overcome this. The only way around this I have found is to have wrapper 2 sit below the header and close before the main content. I then set -ve margins at the top of the content and nav the same size as the height of the image in wrapper2. It worked, but i don't know if I should be doing things like this.
Your help would be greatly appreciated.
It would be great if you could provide an URL to check this behavior, but i would add a :
<div style="clear:both;"> </div>
after the closing of the navigation DIV
BTW, I your are not using any CSS reset, you should. I use blueprint, but there are many.
Alejandro suggested I remove the height of Wrapper 2 and add: background repeat: no repeat;
When I did this the image disappeared, but when I changed the height property to min:height: 295px; it worked beautifully. Thankyou Alejandro for pointing me in the right direction