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
-
Affects of a Home Link 301 Permanent Redirect in the Main Nav Bar
Hi I created a home page link in the main nav bar using functions.php request, and this leads to the home page, and it works fine. The logo on the site when clicked, resolves the home page domain.com which is fine. Is it ok to have a home page link in my main nav bar, as well as a clickable logo which on-click returns the web user to the home page also? (any seo implications with the permanent 301 redirects?) I like to give web users the choice especially as not all users are aware that they can click back to the home page by clicking on the logo. I considered breadcrumbs already. Thanks.
Web Design | | SEOguy10 -
Question #1: Does Google index https:// pages? I thought they didn't because....
generally the difference between https:// and http:// is that the s (stands for secure I think) is usually reserved for payment pages, and other similar types of pages that search engines aren't supposed to index. (like any page where private data is stored) My site that all of my questions are revolving around is built with Volusion (i'm used to wordpress) and I keep finding problems like this one. The site was hardcoded to have all MENU internal links (which was 90% of our internal links) lead to **https://**www.example.com/example-page/ instead of **http://**www.example.com/example-page/ To double check that this was causing a loss in Link Juice. I jumped over to OSE. Sure enough, the internal links were not being indexed, only the links that were manually created and set to NOT include the httpS:// were being indexed. So if OSE wasn't counting the links, and based on the general ideology behind secure http access, that would infer that no link juice is being passed... Right?? Thanks for your time. Screens are available if necessary, but the OSE has already been updated since then and the new internal links ARE STILL NOT being indexed. The problem is.. is this a volusion problem? Should I switch to Wordpress? here's the site URL (please excuse the design, it's pretty ugly considering how basic volusion is compared to wordpress) http://www.uncommonthread.com/
Web Design | | TylerAbernethy0 -
Page Title Optimization
I am reviewing the optimization on my site and it appears that my page titles follow this method: PAGE_NAME | KEYWORD in CITY ST - COMPANY_NAME I am pretty well optimized for "KEYWORD in CITY ST" but am wondering if I should drop it from all page titles except for the pages that actually deal with that keyword. What are your thoughts on optimizing?
Web Design | | nusani0 -
Homepage and Category pages rank for article/post titles after HTML5 Redesign
My site's URL (web address) is: http://bit.ly/g2fhhC Timeline:
Web Design | | mcluna
At the end of March we released a site redesign in HTML5
As part of the redesign we used multiple H1s (for nested articles on the homepage) and for content sections other than articles on a page. In summary, our pages have many many, I mean lots of H1's compared to other sites notable sites that use HTML5 and only one H1 (some of these are the biggest sites on the web) - yet I don't want to say this is the culprit because the HTML5 document outline (page sections) create the equivalent of H1 - H6 tags. We have also have been having Google cache snapshot issues due to Modernzr which we are working to apply the patch. https://github.com/h5bp/html5-boilerplate/issues/1086 - Not sure if this would driving our indexing issues as below. Situation:
Since the redesign when we query our article title then Google will list the homepage, category page or tag page that the article resides on. Most of the time it ranks for the homepage for the article query.
If we link directly to the article pages from a relevant internal page it does not help Google index the correct page. If we link to an article from an external site it does not help Google index the correct page. Here are some images of some example query results for our article titles: Homepage ranks for article title aged 5 hours
http://imgur.com/yNVU2 Homepage ranks for article title aged 36 min.
http://imgur.com/5RZgB Homepage at uncategorized page listed instead of article for exact match article query
http://imgur.com/MddcE Article aged over 10 day indexing correctly. Yes it's possible for Google index our article pages but again.
http://imgur.com/mZhmd What we have done so far:
-Removed the H1 tag from the site wide domain link
-Made the article title a link. How it was on the old version so replicating
-Applying the Modernizr patch today to correct blank caching issue. We are hoping you can assess the number H1s we are using on our homepage (i think over 40) and on our article pages (i believe over 25 H1s) and let us know if this may be sending a confusing signal to Google. Or if you see something else we're missing. All HTML5 and Google documentation makes clear that Google can parse multiple H1s & understand header, sub & that multiple H1s are okay etc... but it seems possible that algorythmic weighting may not have caught up with HTML5. Look forward to your thoughts. Thanks0 -
My personal search page
www.myname.com I watched the "White Board Friday" video on creating your own website based on your name. Can anyone explain why this would be a good concept for me? I'm currently involved in 1. Marketing for the company I work for 2. Sales for the company I work for 3. Affiliate Marketing/ Site Creation as side projects 4. SEO as a free-lance part-time offering 5. PPC & Web-marketing as a free-lance part-time offering Would my personal page be to showcase all of this? why is it beneficial for SEO?
Web Design | | AndySolo0 -
Site Redesign: Bounce rate, converstion, page views, etc.
Hi Fellow Mozzers, I had a few questions regarding some analytics data we have been seeing since our redesign. Just last week we did a site design overhaul at www.lylif.com. One of the biggest changes we immediately saw was a 15-20% increase in our bounce rate. However, our conversion rates, page views, pages per visit, and site duration has increased. If anyone has some insight as to why we may be having such a large increase in our bounce rate that would be most helpful!
Web Design | | lylif11 -
Suggestions for content slider/image slider copy/paste application.
Hey Moz Community, I am looking for a content slider that can be easily changed by non-technicals for posting different styles of content/calls to action and this seems to be best: http://www.slidedeck.com/ I have installed a nivo slider on a Seattle Painting site, and flash slider on a commercial painting site. But I want my blog clients to be able to format..then copy/paste code..linke embedding a video. opinions? Thanks John
Web Design | | johnshearer0 -
Two home pages?
One of my campaigns shows duplicate page content for domain xxx and xxx/index. There is only one index (home) page, so why does it report on two?
Web Design | | Beemer0