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

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

Related

Adding background image to a box element

I am a newbie. I'm finding it hard to add background image to a box element. I've tried resetting the code, moving it to a new folder, resizing the image and changing the class but nothing works. The image doesn't show in the box When I inspect the element on Chrome, it says error file not found.
This is the CSS below
.static-width{
width: 300px;
height: 300px;
background-color: #606060;
background-image: url(Images\millylogo.jpg);
background-repeat: no-repeat;
background-position: center;
}
I think your path is not wright. You must to put the right path (absolute or relative) into the property. You should create a repository with your project and put all your files into it.
A good documentation here

CSS How to remove extra space created by reducing image size using CSS

I am using this function get_the_post_thumbnail_url() to pull the featured image of a post. I don't want to use the WordPress predefined image sizes which leads to using CSS. I specified the width of 40px but I noticed this pushes the text to the right. The image itself resizes perfectly but it appears the image width still remains the same which creates the space between the image and the text.
Here is the image:
Some CSS fix?
Thanks.
Well we don't not have a code to work with. So just try to use on the container display: inline-block;
or display: inline; lastly display: inline-flex;
choose one of these although they might all look the same, but they are not.
And the space will be removed since the container will wrap over the content inside of it.
Add this piece of code along with it to fill the image fully :
<div class="container"></div>
.container {
width: 40px;
height: 40px;
background-image: url("your image");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
you may add this style to the image tag and it must remove the extra space
margin-right: 5px !important;

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

Not able to set background image with Ionic

So I just started out with the Ionic Framework. And I am trying to add a background image. But when I run the application in the browser, I don't see the image. In my console I get a 404 error. I believe my path is correct. I followed this tutorial after I was not sure if my css was correct. Which is basically the same as I have got. So does anybody know what the problem is exactly?
Part of my html code is the following:
<div class="logo"></div>
And my css is the following:
.logo{
background-image: url('../img/logo.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 80%;
height: 246px;
margin: auto;
z-index: 2;
position: relative;
}
Some problems can occur with just using 'background' in CSS, especially when the container doesn't have any other contents.
Try the following:
Adding display: block; with a Width and Height set, this can override any inherited display settings.
Reduce the amount of CSS to troubleshoot, sometimes you've just missing a small part, that has moved or hidden the actual container
IF all else fails, do it step by step on JSFIDDLE and when it continues to work as required, try copying it over. This also helps you learn

CSS Bottom Positioning

So, I have this:
.cmon
{
background-repeat: repeat-x;
background-image: url("line2.png");
position:absolute;
bottom:0px;
}
What it should do, is put the image (line in this case) on the bottom of the page, from what I understand, and repeat it. It does put it on the bottom, but doesn't repeat, anybody knows what's my problem?
This is how it looks like when the code is on:
http://goolag.pw/temptest.html
Also, in the menu (top right corner) the image doesn't even show up, nor does is it on the bottom.
I will be more than happy if anybody knows whats the problem.
(sorry if links are not allowed here, there are no commercials on the web, it's really just to show what's the problem)
To position background images you should use the background-position property:
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
background-position: bottom;
}
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
You'll need to ensure your element has some height and width, however, as background images are not content and do not affect the size of the element.
So first, your problem is not only about CSS but HTML too. You have to attach your attribute .cmon on another tag like <span>, <p>or even <div>.
<div class="cmon"></div>
Then for your CSS :
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
position: absolute;
bottom: 0px;
left: 0px; right: 0px; // For having a full width bar
z-index: 999999; // Will be always visible, even when the menu is showed up
height: 4px; // attribute the height of your image
}
Hope this help you.
Ps : Don't forget to use HTML5 !