I am using css sprites. I have a simple image and a text. I want to display the image in center of the page and the text to vertically center to that image. I am new to css, I couldn't find a way to do it.
The code I have is
<div class="sprite"></div>hi
.sprite {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
Define background position and one div as like this
Css
.centerText{
float:left;
text-align:center;
}
.sprite {
width: 50px;
height: 72px;
background: url("http://s.cdpn.io/79/sprite-steps.png") 3px -6px;
}
HTML
<div class="centerText">
<div class="sprite"></div>hi
</div>
Demo
Related
How to achieve something like the above image. The below gray color block is cropped in the middle with semi circle to accommodate the image. Should I use CSS animations or anything else to get this effect? So that the background of the below element can be cropped as per the image shape.
Use position:absolute; for the image icon and place it between two divs and instead of cropping you can give a background:#fff and padding so it looks like that.
See code Below:
.main{
position:relative;
height: auto;
}
.upper {
background: #eee;
height: 100px;
}
.lower {
background: #ccc;
height: 100px;
}
img.icon {
position: absolute;
top: 40%;
left:50%;
background: #fff;
border-radius:50%;
padding:2px;
}
<div class="main">
<div class="upper"></div>
<img class="icon" src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-24/48/1200-512.png" width="50" />
<div class="lower"></div>
</div>
JsFiddle: https://jsfiddle.net/75euot8d/1/
My header image is overlapping my text and it is very much annoying me. Another thing that is buggy is how my logo text leans right of the center of the image. If someone could help me with both that would be awesome.
Here is my code:
https://jsfiddle.net/c2bom0cc/1/
Here are my tags that are probably the most relevant to this:
#index_header {
position: block;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
#index_header img {
position: block;
float: left;
width: 100%;
height: 100%;
}
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50%;
top: 50%;
}
<div class="page_container">
<div id="index_header">
<a href="#">
<img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
/>
<p class="background_title">G.F. Bakery</p>
</a>
</div>
</div>
I let myself hold a few assumptions on your code:
First, by the full height and width of the image, I figured that you want the image as a stretched background image. So I replaced the <img> with background-image (background shorthand) in CSS Backgrounds.
From your question I see that you want the title in the center of the bakery background.
I did not get what text is overlapped by the image.
If you want text below the image, please put it in an element after <div id="index_header">...</div>, as the background is all over that <div>.
I had to add display:inline-block to .background_title class, so that the vertical-align:middle; would take effect.
I removed all the absolute positioning to handle better with all the alignments.
Absolute positioning make you manually set all the top and left, and it's really difficult to do when your code gets bigger.
Here's you new HTML:
<div class="page_container">
<div id="index_header">
<a href="#">
<p class="background_title">G.F. Bakery</p>
</a>
</div>
<p>Some other content...</p> // this text will not be overlapped by
// #index_header as long as #index_header
// isn't absolutely positioned
</div>
Here's your new CSS:
html, body{ // this is instead of having top:0 and left:0 in #index_header
padding: 0;
margin: 0;
}
.page_container {
height: 100%;
width: 100%;
}
#index_header {
height: 200px;
width: 100%;
text-align: center;
vertical-align: middle;
background: url('http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg') no-repeat center center;
background-size: 100% 100%; // this does the stretching
}
.background_title {
display:inline-block; // this is to apply the vertical-align of parent
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
}
Here's a JSFiddle
Hope this helps.
If you want your text to be under your image and centered, remove the following code:
.background_title {
position: absolute;
}
Just removing the position will move your text under your image and centered.
This is the code that I have that only applies to the background image. I wanted the effect to be the same for the image tag in the html.
What I wanted is
<div class="pic">
<img src="image.png" />
</div>
This is the actual code. Working codepen.
HTML
<div class="pic"></div>
CSS
.pic {
background: url("http://i.imgur.com/Q3DVhY0.jpg") no-repeat;
position: relative;
width: 100%;
max-width: 300px;
border-radius: 50%;
background-size: cover;
display: block;
background-position: center;
}
.pic:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
How do I apply this effect to the image tag in html? I tried to do research on that but I couldn't find anything... I know that it's easier if the image was square but I wanted the effect to be applied to rectangle images with just html and css, no javascript.
is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/Lmh3nt6p/1/
.pic > img{
position: relative;
max-width: 300px;
border-radius: 200px;
}
Here is your circle lol! http://jsfiddle.net/DIRTY_SMITH/Lmh3nt6p/5/
I am creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.
Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:
html:
<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>
with the css:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}
If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.
You should use the position instead of negative margin:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}
You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property
background-position
html
<div id ="welcome">
<h2>Welcome to my website</h2>
</div>
css
#welcome {
width:100%;
height: 600px;
overflow: hidden;
background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
color: #B0171f;
}
DEMO
Read more on background-position
Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.
HTML:
<h2 id="welcome">Welcome to my website</h2>
CSS:
<style>
#welcome {
width:100%;
background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
color: #B0171f;
}
</style>
http://jsfiddle.net/#&togetherjs=DfmkLBOPVu
I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.
<div id="homeScreen">
<div id="homeWrapper">
<img src="logo.png" alt="logo-icon"/>
<img src="ajaxloader.gif" alt="loading.." id="loader"/>
</div>
</div>
I have two images. A logo and a loading image. I need position logo at centre horizontally and vertically and loader at centre at the bottom of page. My CSS is this:
#homeScreen
{
background: #d1d1d1;
width: 100%;
height: 100%;
display: table;
}
#homeWrapper
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
I'm able to get both images at centre by this code. But I don't need to have loader at same position with logo. I need it to be at the end of page without affecting the position of logo. How to do it?
I had a bit of trouble understanding what exactly you wanted, but this code should align the logo to the center (vertically and horizontally) and the loading icon to the bottom, centrally aligned horizontally.
HTML:
<div id="homeScreen">
<div id="homeWrapper">
<div id="logo"><img src="logo.png" alt="logo-icon" width="150" height="150"/></div>
<div id="loading"><img src="ajaxloader.gif" alt="loading.." id="loader" width="30" height="30"/></div>
</div>
</div>
CSS:
#homeScreen
{
background: #d1d1d1;
width: 100%;
height: 100%;
display: table;
}
#logo
{
margin: 0 auto;
width:150px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -75px;
}
#loading
{
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15px;
width: 30px;
height: 30px;
}
If you want it at end of page try using the float:right on loader img, so it will be displayed at the end of the row. If you want to show the loader below logo, use a br after logo img.
If you want to center the logo to whole page and display loader at right bottom of page, you can apply the 'vertical-align:middle' to logo and 'vertical-align:bottom;float:right' to loader.
Hope this helps.