I have a css sprite which I need to place as a background image to the right of some text. Like an external link icon. Also i want the text to be full width followed by the image.
My Css Is As Follows:
.container
{
width:1247px;
background-color:#444;
}
.container a
{
background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
height: 30px;
width: 30px;
display: block;
}
.container .external
{
background-position: -491px 2px;
}
.container .mail
{
background-position: -526px 0px;
}
The fiddle link is below:
http://jsfiddle.net/6dw31962/
Please Help.
Thanks In Advance
Try this.
.container {
width:1247px;
/*height:30px;*/
}
.container a {
display: block;
position: relative;
margin-bottom: 15px;
}
.container a:after {
background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
height: 30px;
width: 30px;
display: inline-flex;
content: '';
position: absolute;
top: -5px;
background-position: -455px 0;
}
.container .external {
background-position: -491px 2px;
}
.container .mail {
background-position: -526px 0px;
}
<div class="container">
<a class="external" href="http://somelink.com/">MyLink</a>
<a class="mail" href="gmail.com">Mail To Us</a>
</div>
Related
I am making a personal website with a parallax background which takes 100% of the screen size, however when I change the screen size to the minimum size the text goes out of the div, I use a padding-top percentage. I do know quite a bit of css but I don't want to fiddle around and mess everything up, I've looked everywhere but no answer came close to my problem. Basically I just want to vertically and horizontally center my content even when I resize my screen.
Here's my CSS:
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('/storage/images/background.jpeg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
margin-top: 15%;
text-align:center;
}
And my HTML:
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="/storage/images/image.jpg" style="border-radius:100%; width:150px; height:auto;">
<h1>My name</h1>
</div>
</div>
</div>
</div>
Use :
.main {
text-align: center;<-----------------------
//More code..........
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 52.50%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-image: url('http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg');
/* let's see it! */
color: white;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.text {
max-width: 150px;
text-align: center;
display: inline-block;
margin-top: 15%;
}
.text img {
border-radius:100%;
width:70%;
height:auto;
}
.text h1 {
margin: 0;
padding: 0;
}
<div class="row">
<div class="wrapper">
<div class="main">
<div class=text>
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<h1>My name</h1>
</div>
</div>
</div>
</div>
I've seen tons of questions that are the exact opposite of what I need. I want a button, that when hovered over, will have an opaque background, but text that is the color of the background image of the body.
Here's an easy way to do it with a bit o' jquery.
fiddle
$(".filter").hover(function() {
$(this).css("opacity", ".8");
}, function() {
$(this).css("opacity", ".4");
});
#box {
background-image: url("http://vignette2.wikia.nocookie.net/despicableme/images/7/7a/Gru_thinking.jpg/revision/latest?cb=20130901203940");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid;
width: 500px;
height: 300px;
position: relative;
opacity: 1;
}
.filter {
width: 100%;
height: 100%;
background-color: white;
opacity: 0.4;
}
p {
width: 100%;
height: 100%;
color: #000;
text-align: center;
margin: auto;
}
p:hover {
width: 100%;
height: 100%;
color: lightblue;
text-align: center;
margin: auto;
}
a{text-decoration:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div id="box">
<div class="filter">
<p>
hello my name is rachel
</p>
</div>
</div>
</a>
try with that.
body{background-color:#000;}`
button{
color:white;`
background-color:red;}
button:hover, button:focus{
color:transparent;
background-color:rgba(255,0,0,.5)}
Want to make hr like this img1
and
img2
don't known how to achieve this.
I'm pretty sure that using an <hr> is not the recommended way to do that. You could just try:
<div><img src='http://i.stack.imgur.com/Llk2U.png'><div>
Or use a css class to make it a bit more elegant:
.whybuyfromus
{
background: url('http://i.stack.imgur.com/Llk2U.png') no-repeat;
height: 101px;
background-size: contain;
}
<div class="whybuyfromus" />
I know that this already has an accepted answer but I wanted to see if it was possible to make a fully responsive version with CSS. I found a solution using flexbox:
.fancy-hr {
display: flex;
background-image:
url(http://i.imgur.com/ZmheWg5.png),
url(http://i.imgur.com/ph3e3OT.png);
background-size: 115px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
height: 37px;
box-sizing: border-box;
padding: 0 115px;
}
.fancy-hr:before,
.fancy-hr:after {
content: "";
flex: 1;
background: url(http://i.imgur.com/NBus6Hr.png) repeat-x;
}
.fancy-hr span {
display: inline-block;
height: 100%;
line-height: 37px;
}
.fancy-hr span:before,
.fancy-hr span:after {
content: "";
width: 10px;
height: 100%;
display: inline-block;
}
.fancy-hr span:before {
background-image: url(http://i.imgur.com/wMU1oDn.png);
float: left;
}
.fancy-hr span:after {
background-image: url(http://i.imgur.com/4Q2el3J.png);
float: right;
}
<div class="fancy-hr"><span>Text here</span></div>
try this one:
.hr {
background-image: url(http://i.stack.imgur.com/Llk2U.png);
height: 100px;
background-repeat: no-repeat;
background-size: 100%;
}
<div class="hr" />
Look at the following JSFiddle
.container {
width: 100%;
background-color: yellow;
}
.classic {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.classic-img {
display: block;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
.classic-img img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.top-menu {
width: 100%;
height: 50px;
position: relative;
background-color: red;
}
.top-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: center;
}
.top-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.top-menu-buttons span {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.bottom-menu {
width: 100%;
height: 50px;
position: relative;
background-color: green;
}
.bottom-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 80%;
text-align: center;
}
.bottom-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 35px;
color: white;
padding-left: 10px;
padding-right: 10px;
}
<div class="list">
<a class="item">
<div id="container" class="container">
<div class="top-menu">
<div class="top-menu-buttons">
<button>-</button>
<span>20</span>
<button>+</button>
</div>
</div>
<div id="classic" class="classic">
<div id="classic-img" class="classic-img">
<img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" />
</div>
</div>
<div class="bottom-menu">
<div class="bottom-menu-buttons">
<button class="button button-icon ion-eye">1</button>
<button class="button button-icon ion-refresh">2</button>
<button class="button button-icon ion-crop">3</button>
<button class="button button-icon ion-android-options">4</button>
<button class="button button-icon ion-social-tumblr">5</button>
</div>
</div>
</a>
</div>
CSS:
What i want to achieve is something like the following:
The red area should be a top menu. It should not be a fixed top position it should just always be on top of the image.
As you can see the image has a white background and a black forground. It should look like a polaroid.
The green area should be a menu at the bottom but also not fixed to the bottom it should just always be underneath the image. If there is not enough space it should simply scroll not clinch or esize any of the divs. I guess the main problem is the div in the middle where the image with the background image is.
I try for ages now to get the correct css but unfortunately im very unexperienced and all i can do at the moment is try and error but i cant get it working.
remove position: absolute from .classic-img and .classic-img img
add margin: 100px auto; adjust 100px as per your need, also you have set background-size: contain and the aspect ratio of bg image is almost equal to the image, therefore you would see only small portion of bg image here in the fiddle - jsfiddle.net/18vg13dt/3
additionally if you want gap from left and right also the use - margin: 100px 50px; similarly according to your needs.
jsfiddle
I guess this is what you want?
.classic {
background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
background-repeat: no-repeat;
background-size: cover;
}
.classic-img {
padding: 10px;
box-sizing: border-box;
}
.classic-img img {
display:block;
width:100%;
height:100%;
}
You need to set the height for the class .classic-img
Try this :
.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}
If you still face the issue, do come back and let us know.
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>