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

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

Related

my background url for css property is not displaying image sprite?

I'm getting the image from w3schools and I'm practicing using image sprites. I don't know what I'm doing wrong. I tried creating an image sprite with an image tag and a div tag, but neither option is working. I don't know if my path is wrong, but I have my image sprite in a folder called "images" and have my website in my desktop folder. Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="images/img_navsprites.gif" /> <br></br>
<img id="home" src="img_trans.gif" alt="home" />
<div class="img" alt="img"></div>
</body>
</html>
Here is my css code:
#home {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif") 0 0;
}
Is this image considered an image sprite?
Here is my file structure:
To answer a couple of your questions:
"Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.
You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.
The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.
The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.
To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div class="img"... is the one proper way of utilizing a sprite.
It should look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
</style>
<div class="img"></div>
I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.
That would look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: -91px -45px;
}
</style>
Don't apply a background-image to an img tag, as you do it for your #home image
Make all those elements empty divs or spans in the HTML code, to which you apply the background sprite image, and use according background-position values to make the desired part of the sprite image visible.

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

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>

CSS: background image only shows on first occurring div on page

I have a problem which has me stumped. I have it simplified down to this. The relevant (only) CSS style is:
#segment1,
#segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(../XYZ-TEST/1alt.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
and the relevant test HTML is:
<div id="segment1">Segment one</div>
<div id="segment2">Segment two</div>
So you think you'd get two identical divs side by side, with the same background image - except when it is rendered, the background image ONLY appears on the first occurring . The problem appears to be on the rendering, not the code. If I put the HTML for segment2 first, that one gets the background image and the other one doesn't. Other CSS seems fine, just the background image fails. The path to the background image is fine.
It looks like a problem within CSS with defining multiple background images, but I can't find any other problem like it mentioned on the web. Tested in both Chrome and FF. I've ruled out a stray semi-colon or similar, because both are defined simultaneously. Can you see anything I've missed ?
Remove background-attachment:fixed from css. It should solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/256/
#segment1, #segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(http://www-mtl.mit.edu/img/bg_01.gif);
background-repeat: no-repeat;
background-position: top left;
}
Explanation: If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

How to make two different div in HTML in same background image size?

I want to create a website by HTML codes.
I have a few questions and I have simplify the codes so that you can easily understand my problems.
my first div :
<div id="div1" style="display: none;">
<div class="h1">INFORMATION</div></div>
my second div :
<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div></div>
CSS :
body {
background-image: url(world-map_00246938.jpg);
background-attachment: fixed;
line-height: 15px;
text-align: justify;
background-repeat: no-repeat;
background-size: cover;
background-color: #FFFFFF;
background-properties: fixed;
}
div1 is the first appearance of website. I got a problem when I click a link to appear the div2, the background of website transform to the bigger size. But it's turn to normal size when I click a link to div 1.
The background image of website is turn to bigger size at div2 when I'd inserted an image in div2 :
<div id="div2" style="display: none;">
<div class="h1">INTERNATIONAL STUDENTS</div>
<center><img src="url.png"
width=100%></center></div>
From my view, I think that the insertion of an image in div2 makes the background image of website transform to bigger size. But when I looking at my codes, I already put the background properties as a fixed.
Now, I want to find a solution that can maintain the size of my background image of website no matter what things that I inserted to that codings..
Any helps much appreciated.
The problem is the background-size: cover declaration, which will change the background size to cover the entire element. Removing that should cause the background image size to be the original image size.

background image stretch and crop

So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.