How to keep the center of the background image in html css - html

So i made a html page with background image of a person on it like this. I want to make it responsive, so that when I open the web on the phone, the person is on the center (shows the center of the image). For now the output shows the left part of the image like this. Is there any part in the css that i can change to make that happen?

Change your HTML code like below. You may see the Link
<div class="imageDiv">
<img class="imageClass" src="../yourfile/" />
</div>
Then try with the following CSS:
div.imageDiv {
position:absolute;
max-width:45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
img.imageClass {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}

Using the image given in the question (which is a screenshot, but I assume contains most of the actual image) I think it may be possible that using just plain CSS without regard to exactly where the figure's head is in relation to the image dimensions will be good enough for your needs.
This snippet uses both background-size: cover - to ensure the whole of the element (in this case the body) is covered and background-position: center center - to get (roughly) the head in the center both vertically and horizontally.
It would be useful to check using your actual image rather than the mockup from the screenshot but hopefully this snippet shows the basic idea:
body {
background-image: url(https://i.stack.imgur.com/E2Emo.jpg);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center center;
}
<body></body>

Related

Image on body not repeating even when specifying "repeat-x"

I have specified a div in my HTML code then defined the div in the stylesheet with a background image, height, width and a repeat-x value. My image does not repeat though.
This does work if I specify an image on the HTML file but then it overlaps the repeating image on the webpage.
CSS:
.header {
height: 120px;
width: 120px;
display:block;
background-image:url(logo.gif);
background-repeat: repeat-x;
background-size: contain;
}
HTML:
<div class="header" id="header">
<!--<img src="logo.gif" name="logo" width="181" height="119"
id="logo"/> -->
</div>
The expected results is my logo.gif being repeated to the right side of the page on the x axis. Actual results (as mentioned above) are that nothing comes up. The only time something comes up, is when I uncomment that HTML code above and then the image repeats (although its the CSS image repeating, not the HTML one) and there is a HTML image on top of it with the CSS image repeating beneath it, which looks weird because some of the logo sticks out from the HTML image. I tried to fix this problem by commenting out the HTML image because, hopefully, the CSS one would repeat but when commenting out the HTML img tag, the CSS one disappears too.
To get the effect that you want, first the width of the div needs to be bigger than height in order to see the repeat image in x-axis for example:
CSS:
.header {
height: 120px;
width: 460px; // <-- this needs to be bigger than height
display:block;
background-image:url(logo.gif);
background-repeat: repeat-x;
background-size: contain;
}
Here's the: example

How to stretch and reduce background image for text label using css

I am designing a webpage that contains a background image
like arrow for label. I have designed the image in Photoshop.
My problem is that the image size is not expanding and reducing as
per text.
So please help me, what should I do? Is there any method to do this?
HTML:
<label><span>First Name</span></label>
CSS:
label
{
background-image:url('./images/lblimg.png');
width:auto;
display:inline-block;
}
span
{
line-height:50px;text-align:center;
}
Use the style:
background-size: cover;
background-repeat: no-repeat;
With background-size:cover the image will grow as large as possible so that the background area is completely covered by it.
you need to set the background-size property to 100% for both with and height.
.bgimg{
background-image: url(https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png);
background-size: 100% 100%;
font-size: 40px;
color: yellowgreen;
}
<span class="bgimg">
div with little text :)
</span>
<br />
<span class="bgimg">
div with more and more and more text :)
</span>
You have two options, both using CSS3 background-size:
Use background-size: cover: the background image will grow as large as possible until it covers the whole background area.
Pros:
The image will cover the whole area
The image will not be stretched
Cons:
As the image doesn't stretch, just grows until it covers the whole area, some parts of the picture may not be displayed.
Use background-size: 100% 100%: the background image will occupy 100% of the width and height of the container.
Pros:
The image will cover the whole area
The whole image will be displayed (no hidden parts)
Cons:
The image may be stretched (although this could be considered a pro, specially for the behavior expected in the question)
In your particular case, the second option will be better as you want to display the whole arrow without risking some parts getting hidden.
In your code, it would look like this:
label
{
background-image:url('./images/lblimg.png');
background-size:100% 100%;
width:auto;
display:inline-block;
}
Edit (as per CSS2 request by OP): This cannot be achieved exclusively with CSS2 unless you change the HTML code. In that case you would actually not be using a background-image, but directly an image that would be behind the text.
This is how the HTML would look:
<label>
<img src="http://lorempixel.com/400/200/animals/" alt="Random pic" />
<span>First Name</span>
</label>
This is how the CSS would look:
label {
width:auto;
display:inline-block;
position:relative;
}
span {
line-height:50px;text-align:center;
position:relative;
z-index:2;
}
img {
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
}
You can see an example of the CSS3 and CSS2 solutions on this JSFiddle: http://jsfiddle.net/othnjk5x/

Fixed Div the length of the window

I am very new to HTML/CSS. I am building a website for the Sheriff's office I work for, and am having an issue.
The website has a fixed div on the left side of the page, that includes all of the links. The content is on the right, and is designed to scroll, however I want the left div (links) to always remain the same. I designed the site on a laptop, and so far its working fine on that, however when viewing the homepage on a desktop, the left div doesnt stretch all the way to the bottom.
Here is the link: http://www.mlpropmgt.com/sheriff3/index.html
I used percentages, thinking that would make that left div always stretch to the bottom of the screen, however it didnt seem to work.
Any help would be much appreciated!
from what I gather viewing the code in your webpage you did all the right things, and the leftbar is 100% height, however the image you used as a background is not, css does not stretch the image unless you tell it to do it, you can use
.leftbar{ background-size: cover;}
or use an image that is big enough to account for the extra height in a desktop, keep in mind that Imac's hace 1440px window height
Since you have 2 divs do this
<div id="Main_div">
<div id="left_div">div 1</div>
<div id="Right_div">div 2</div>
</div>
css
#Main_div
{
border:1px solid red;
height:100%;
width:100%;
position:fixed;
}
#left_div
{
border:1px solid black;
height:100%;
width:40%;
float:left;
position:fixed;
}
#Right_div
{
border:1px solid blue;
height:100%;
marigh-left:41%;
float:right; // or its not needed
}
let us know
give height of the div as 100% (height:100%;) then set position:fixed;
it will works fine
Hi righ now your left side it has 100% height so is working the div is streching all the way to the bottom. The problem is the background image. The background image is smaller than a desktop window height so that's why it looks like is not streching all the way to the bottom.
Possible solutions:
Change the background image to a bigger one that just have the "background", and put another two images with the sherif star and the sheriff's logo/name with a absolute position so they will look like background images.
You can add the following to your leftbar div. The problem here is that the image is going to strech and at some point you are not going to be able to see the complete logo/name
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Want to position the background image in the middle

Hello on my login page I have a background image. Currently the image is centered but not centered the way I want it. I want it so the image is always centered in the middle of the screen. Curently, my image is centered but is positioned at the top of the page. The image need to be positioned in the middle of the screen, and kept centered.
login.html
<body style="background-image: url({{MEDIA_URL}}/admin_media/img/admin/bigstock_Photo_Showing_Financial_Growth_1339836.jpg); background-position: 50% 50%; background-repeat:no-repeat;">
may be you have write like this :
background-position: center center;
EDIT:
may be there problem with the body because it not takes screen entire height so if you want an image show in the center of the screen then write
html,body{height:100%;}
body{
background:url(http://www.poster.net/van-gogh-vincent/van-gogh-vincent-sternennacht-2601013.jpg) no-repeat fixed center center;
}
check the example http://jsfiddle.net/sandeep/m2fZs/2/
Instead of continuing to post comments, I thought it might be smarter to create a new answer.
Would something like this demo work for you? (replace 'fixed' with 'scroll' , if you want the img to scroll up and down with the page)
try it like this:
#element {
background-attachment:fixed;
background-position:center;
}
this should work!

Why won't my transparant 'second' background image center?

I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.