Making a large image responsive

I have this large image which I have set width: 100% and height auto but it doesn’t seem to be resposive?

http://www.muslimahwebdesign.co.uk/wac/splash-page/

also how do I make the whole image on the page without having to scroll down?

A lot of visitors will quit when they see a home page that says “Click to enter” or something similar. They’ve already got to your site. Why make an extra hurdle for them?

2 Likes

not to mention that splash pages aren’t great in terms of SEO

Seems to be responsive to me if you mean the large background image?

Usually you just apply it to the body element and use background-attachment:fixed and it will fill the page. However you have thousands of divs on that splash page as well as empty divs that you are using to create space and you don’t really need any of them.

As others have said above you are loading a heavy page and then making the visitor go to another page? I know there is a penchant for full page images these days but they are usually managed by having a scroll arrow to show that content is just underneath (commonly used in parallax layouts) rather than loading a new page.

Yes I have to say this is the forst ever splash page I have done and i was wondering what thethoughts on them are.
Unfortunately I have to add the emplty space because it is being added with a drag and drop tool which is not allowing the whole image to show without the sapce ( or something ) being there.

But I’m going to look up facts on splash pages and advise on it accordinly so thanks.

Indeed. Do you really require 39 scripts and 39 style sheets to render that page?

At the very least, you should be looking at compressing them.

Hmm yes that seems crazy. If I try to merge these stylesheets how to I check again, what you’ve shown me to make sure improvements have been made?

Also regarding the page I added some css to make sure the image and text appear central at all times however it is not so in safari. What could be the reason for this and how should I fix it?

@TechnoBear I’ve tried to merge some stylesheets. With regards to your advise how do i check to see if it has made any improvement and how do I compress?

74 files to render a single, simple page still seems vastly excessive to me. Remember, the more requests made to the server, the slower the page load time will be.

(I’m using the Web Developer Toolbar’s “View Document Size” option to see this information.)

Provided you (or your host) have mod_deflate enabled on the server, the following lines in your .htaccess file will compress any HTML, CSS or JS files:

<FilesMatch "\.(js|css|html)$">
SetOutputFilter DEFLATE
</FilesMatch>

Ok that’s great thanks and if I compress these files it will not effect anything in any way?

It won’t have any adverse effect, no - just help your site to load more quickly.

(Don’t try to compress image files - most image file types are already compressed.)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.