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
-
With Google's new Speed Update, what does that mean for AMP pages?
Hey everyone! I wanted to get the other Mozzers opinions on this. With Google announcing a new Speed Update that will affect mobile rankings, I wanted to ask: How will AMP pages play into this? Let me know what you think!
Web Design | | TaylorRHawkins
Thanks!2 -
Toggle Tabs on pages - How to present information to users
Hi all, I can use some help with SEO/UX related question I have got. I have a client who has some toggel tabs on its website. Is there a way to display the relevant information from these toggle tabs when a user lands on the page instead of having the same toggle tab show for whenever a user reaches the page? What I am trying to understand is that if a user searched for "vitamin C benefit" (lets say) in Google and then clicks on the link, the user is presented with the "benefits" tab on the page instead of "side effects" tab. Any help would be appreciated! Thanks
Web Design | | Malika1
Malika0 -
Is it still necessary to have a "home" page button/link in the top nav?
Or is it not necessary to have a "home" tab/link because everybody by this time knows you can get to the home page by clicking on the logo?
Web Design | | FindLaw0 -
No-index part of page
Hi All, I want to copy articles from CNN/Bloomberg/etc and I want to show the content to my users in Lightbox (CSS), but the problem is duplicate content. Do you have any idea how can I no-index part of page/content?
Web Design | | JohnPalmer0 -
Existing URL structure and how to handle new pages before migration
Hi there! Currently, our site uses underscores "_" within the url structure. We are moving to Wordpress soon (the site is currently static html) but it will be a couple of months before the migration. Here is an example of the current structure: www.oldsitestructure.com/about_us/success_stories/custom_vinyl_banners When we do change, our url structure will have hyphen's "-" to separate terms, so the preferred new structure will be: www.oldsitestructure.com/about-us/success-stories/custom-vinyl-banners The entire site (with the exception of our Wordpress blog) currently uses the old structure. We have about 10 - 15 pages we will add before our migration, my question is: Should we use the preferred url structure starting NOW or stick with the old one? And set up 301 redirects are part of the migration process? Many thanks!
Web Design | | SEOSponge
Jon0 -
Infinite Page Scrolling for e-commerce Product Catetegories
Hi There, I would like to know what's the pros and cons of Infinite Page Scrolling for e-commerce Product Categories that have over 700 products. Sample here Secondly how will this effect our on page SEO as far as google concerned? Many Thanks
Web Design | | Jvalops0 -
Auto-Generated META tag on 404 Page
I'm currently creating a 404 error page for my site and I noticed that a similar site uses some sort of code to automatically generate a meta title. Is this useful? For instance type in electrolux.com/john This page does not exist but in the title you'll see John | Electrolux How can i do this on my site?
Web Design | | evacuumstoreSEO0 -
Landing Page/Home Page issues
Hi. I was speaking with my designer last night (we are setting up a new website) and we were discussing the design of our homepage, now the designer said he wanted the first page of the website to be a sort of landing page page were the visitor has to click and enter, im sure everyone has all come across these before. However, I am concerned as to the SEO implications of this? Any help guys?
Web Design | | CompleteOffice0