CODEWITHSUNDEEP
jquerycssimagehtmlbackground
Nata2ha Mayan2
Nata2ha Mayan2

Reputation: 484

Images disappear when the height is increased. Why?

I'm attempting 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, and it's the height that's different. Do I need to make a change in the stylesheet or the source code?

The style sheet code is:

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

In the source code it's just placed as:

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

So there is nothing really special there.

Upvotes: 3

Views: 252

Answers (2)

Ram
Ram

Reputation: 144689

you should remove the additional spaces from image name. 

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

Upvotes: 3

jamesmortensen
jamesmortensen

Reputation: 34038

The problem could be in your CSS. #intro .story is the selector for the element with the classname "story" that is a child of the element with the id "intro".

Since you didn't show the child of intro, I'm assuming maybe you meant to apply the image to the div#intro instead.

If that is not the problem, then are you able to load the new image in your browser if you go to that image url directly? In other words, are you sure you're spelling the name correctly and that the image is in the location you specified?

Since your other placeholder loads, this suggests that the new one might not be referenced correctly. You could try loading a few different images of varying sizes to learn more about the problem.

Upvotes: 2

Related Questions