Background image repositioning - html

An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}

It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.

First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).

It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}

In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.

Related

CSS Image border Remove

I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

Changing a background image repeat file

I was wondering if it's possible to change what file the background image repeats to when the old image runs out.
So, if image01.jpg is set as the first background-image, when it runs out vertically image02.jpq would be added as the background image to complete the page?
It might be a straight 'No', thts fine im just wondering
With CSS3 you can have multiple backgrounds. You can specify a background-repeat for each of them. It is supported by all major browsers, except IE8 and before.
http://www.css3.info/preview/multiple-backgrounds/
There's always a solution for something in CSS if you're willing to add more markup to your file. Your best bet is to wrap the element you have the first image in with a containing div with the background you would like to appear if the first image runs out. Like so:
HTML:
<div class="container"><span class="image"></span></div>
CSS:
.container {
background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
width: 200px; /* The maximum width */
/* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}
.image {
background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}
Of course you can always replace the <span> with an actual image as well.
Don't forget that HTML is an element, too.
html {/*insert tiling background image*/}
body {/*insert normal background image*/}
The body background will sit on top of the tiling html background. Works in every browser and won't require additional markup.

frame using a Background-image

I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>

Separate background images at top and bottom of site?

I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.