How to create this image effect for my home page
-
How do I make a wide, somewhat fast loading image effect like this home page has:
work on my website
I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion.
Thanks!
-
Hi Bob,
This effect is done using a background image.
The image being used is this one:
http://www.3dcart.com/images/5/main-panorama3.jpg
It has a width of 2500 and height of 444. This ensures that it takes up the whole screen on devices less than 2500px wide (which is most of them). The image has feathering on the left and right - which allows it to fade to the same as the black background on devices largest than 2500px.
The site specifies the image, width and background colour in their CSS file:
.panel0 {
height: 444px;
background: #18100d url(../images/5/main-panorama3.jpg) no-repeat center top;
}and to display the background image - they use HTML similar to this:
[SOME STUFF]
I hope that helps.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
CAPTCHA Alternatives to Improve Page Load Speed
Recently I had to install reCAPTCHA on my site. The site contains domain name generators and they were being misused, in the words of my host: _Addition of a Captcha will go one of two ways - hit the bruting on the head as intended - OR it will increase the load and the impact by rendering the Captcha's. _ Have noticed that reCAPTCHA adds a fair amount of code 32% of page size and 5 requests. I want to replace reCAPTCHA with an alternative, has anyone got any ideas? Cheers. Justin
Web Design | | GrouchyKids0 -
Creating a new website, but I'd like to control it under a different domain.
I'd like to control it under the domain of another website with a higher DA. Can I create the new website (website A) and do an immediate re-direct to another website (website B)? Or would I be better at putting it as a subdomain? Such as www.websitea.websiteb.com? Cheers all, Rhys
Web Design | | SwanseaMedicine0 -
We use bigcommerce platform and want to access the bigcommerce server to change the way our product images display
Hi We use bigcommerce and want to chage the way we display multiple images for our products. At the moment in bigcommerce you switch between images by clicking the next image, we want the images to change when we hover the curser over the image. Does anyone know how to do this ? Regards Adrienne
Web Design | | CostumeD0 -
40 percent redundant content on landing pages with 60 percent unique information.
I have searched schema.org for tags to use for our redudant content on 25 unique local landing pages. The redundant content references our services and abilities on each page. Could anyone tell me how to retain this content and direct the search engines to disregard this portion of the landing page. We are a WordPress site -- if there is a plugin - I would love to know which one might work, although I have not been able to find one that will protect us from duplicate content issues. Thank you in advance.
Web Design | | seant1190 -
Should I create a microsite or will 301 be sufficient?
We have a client http://www.shedfinders.com/, new site and we are slowly building DA & PA for. However they have another domain industrialpropertyscotland (one of the keywords they want to rank for) Should we create a little microsite attached to the main site - Say "Your guide to buying industrial property in Scotland" or should we just stick to a 301 redirect and keep working on the main Shedfinders site? Thanks, Laura
Web Design | | lauratagdigital0 -
Flag page elements to not be loaded by Instapaper and co.
Does anybody know if there is a way to mark certain elements (especially navigation menus) so that instapaper and co don't pull them? I'm looking for a quick solution (best would be if it was CSS based) nothing fancy like parsing the user-agent. That would be plan B. I've added role="navigation" id="navigation" and class="navigation" to the nav elements in hope that it would work. Seems like it does not; sometimes the elements are present in the page generated by instapaper, sometimes not. Thank you for any replies and have a great day! Jan
Web Design | | jmueller0 -
Site-wide footer links or single "website credits" page?
I see that you have already answered this question before back in 2007 (http://www.seomoz.org/qa/view/2163), but wanted to ask your current opinion on the same question: Should I add a site-wide footer link to my client websites pointing to my website, or should I create a "website credits" page on my clients site, add this to the footer and then link from within this page out to my website?
Web Design | | eseyo0 -
What's the best SEO option for jQuery image carousels?
My client wants a fancy jquery carousel at the top of their home page, as is all the rage these days. I would like to add some nice SEO friendly text to that carousel, but I'm not sure how best to do that..I assume that by keeping the text which will appear in the carousel in divs on the page, which will be swapped out as the images cycle, it should still be easily picked up by search engines?
Web Design | | TroyCarlson1