Clever Geek Handbook

Images disappear as the height increases. What for?

I'm trying to make a parallax page, but when I change the placeholder image to the one I'm going to use, the new one disappears.

The width of the two images is the same, but the height is different. Do I need to make changes to my stylesheet or source code?

Style sheet code:

#intro .story{
    background: url (images/LAYER2 TEXT RIGHT.png) 50% -0px no-repeat fixed;
    height: 3798px;
    position: relative;
    width: 1024px;

In the original code, it is simply placed as:

</head>
<body>
<div id="intro">

Therefore, there is nothing special.

+3


source to share


2 answers


you should remove extra spaces from the image name.



#intro .story{
    background: url("images/LAYER2-TEXT-RIGHT.png") 50% 0px no-repeat fixed;
    height: 3798px;
    position: relative;
    width: 1024px;
+3


source


The problem might be in your CSS. #intro .story

is a selector for an element named "story" of a class that is a child of an element with identifier "intro".

Since you didn't show the child intro, I am assuming you wanted to apply the image to the div # input instead.



If that's not a problem, can you download the new image in your browser if you go to that url directly? In other words, are you sure you spelled the name correctly and that the image is in the location you specified?

Since your other placeholders are uploading, this suggests that the new one may be incorrectly referenced. You can try uploading several different images of different sizes to find out more about the problem.

+2


source






More articles:


All Articles