Step-by-step guide to designing a custom eBay-inspired logo page using HTML and CSS

Recently, I stumbled upon a fascinating website design for eBay's new logo page. It got me thinking about how I could recreate something similar for my own website. The concept of having the logo visible through the gaps is quite intriguing.

If you'd like to check out eBay's new logo page, here is the link:

Upon analyzing the design further, it appears that the background with the logo remains fixed while the rest of the content scrolls past it. This raises two main questions:

  • How do they ensure the 'front' div fills the entire page?
  • How do they manage to change the background as users scroll down the page?

If anyone has any insights or tips on how to achieve a similar effect, I would greatly appreciate your input. Thanks in advance!

javascripthtmlcss

Answer №1

This technique is actually quite straightforward. By applying multiple background images to various section elements and setting a fixed background-attachment, the backgrounds remain in a consistent position. The end result is an element acting as a mask for its background.

To better understand how this effect is achieved, you can use the following code:

HTML

<div></div>
<div class="ebay-img1"></div>
<div></div>
<div class="ebay-img2"></div>
<div></div>
<div class="ebay-img3"></div>

CSS

div { height: 600px; background-attachment:fixed; border-bottom: 1px solid black; }
.ebay-img1 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-1.png") no-repeat 50% 0 fixed }
.ebay-img2 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-2.png") no-repeat 50% 0 fixed }
.ebay-img3 { background: black url("http://pics.ebaystatic.com/aw/pics/announcements/new/logo/logo-3.png") no-repeat 50% 0 fixed }

​ To view this code in action, visit: http://jsfiddle.net/CAMEn/

Answer №2

Instead of using traditional background elements, the "background" effect is created by strategically placing <section> tags within the content items. By applying the style background-attachment: fixed; to these sections, they seamlessly blend in with the page layout, giving the illusion of a single cohesive background.

Answer №3

The CSS file contains the code for dynamic background and div fills, which is open for viewing, downloading, and experimentation. Have fun exploring!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular and JavaScript: Today is Monday and the date is exactly one week old

I am currently working on an Angular application that is connected to a REST API. In order to minimize the number of requests made, I have implemented a method to store all data in the local storage. .factory('$localstorage', ['$window&apos ...

javascriptangularjsdate

Retrieve data attributes to obtain details about the slider before and after

My task is to create a slider with information about the previous and next slides. For example, in the slider, there are left < and right > arrows. Behind these arrows, there are circles. When you hover over any arrow to change the next or previous ...

javascriptjqueryowl-carousel

The Vue JS Router is prominently displayed in the center of the webpage

I have been delving into Vue JS and working on constructing an app. I've implemented vue router, however, it seems to be causing the content within the routed component to display with excessive margins/padding. I've attempted various solutions s ...

javascriptvue.jsvuejs2

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css

Stripping initial tags from an xml string using PHP

My URL is: http://lx2.loc.gov:210/lcdb?operation=searchRetrieve&recordSchema=marcxml&version=1.1&maximumRecords=10&query=bath.isbn%3D9781594634123%0A++++ This URL returns an xml string, and I am looking to remove the opening tags of this ...

phphtmlxmlwebextract

Changing a string into a date format with the help of JavaScript AngularJS

My string is as follows: 13-12-2017 05:05 AM I am looking to convert it to the following format: Date 2017-12-13T05:05:00.000Z Attempted Solution: var mydate = '13-12-2017 05:05 AM'; var selectedDate = new Date(mydate); Upon logging the selec ...

javascriptangular

sending data between pages in a Next.js application

I'm working on a project that consists of two pages: test1 and test2. I want to pass a prop from page 1 to page 2 without using the useRouter hook or setting it as a query string. In my test1 page, I have a color variable defined as const with a value ...

javascriptreactjsnext.jsreact-props

Breaking down the steps to flip between two images when clicked in Vue.js

I'm currently trying to implement a feature in Vue.js where images switch on click. The functionality I'm aiming for is as follows: Upon initial load, the image displays in black, then upon clicking/selecting it, the image transitions into a blu ...

javascripttypescriptvue.jsvue-componentdynamic-programming

Using Threejs JSONLoader and OOP to easily add models to a scene post-loading

I am working on incorporating the THREE JSONLoader into a "Scenemanager" Object that manages the addition and removal of objects and models. My main goal is to deepen my understanding of OOP, JS, and Threejs. Within App3D (which oversees the scene), I cal ...

javascriptoopthree.js

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

The function is not recognized in C# programming language

Whenever I try to trigger functions by clicking buttons, nothing seems to happen and an error message appears in the console. Uncaught ReferenceError: AddressInputSet is not defined at HTMLButtonElement.onclick I'm new to this and could use ...

javascriptc#htmlasp.net-core

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

javascripthtmlcssonclick

Finding nested div elements within a container div using JavaScript/jQuery and AJAX

Is there a way to access all the HTML code within a specific div element? Here is a snippet of my current code: function refresh() { $.ajax({ url: '/tiers/', success: function(data) { var html = jQuery('< ...

javascriptjqueryhtmlajax

Generate a fresh JSON object following a click event triggered by an HTTP PUT request

I have the following structure in JSON format: "disputes": [ { id: "", negotiation_type: "", history:{ user_flag: "", created_at: "", updated_at: "", created_by: null, updated_by: null, ...

javascriptjsonangular

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

`What is the method for retrieving controller functions in karma test scenarios?`

I am a beginner when it comes to Angular and Karma. Here is an example of a controller in Angular: angular.module('login').controller('LoginCtrl', function ($scope, $location) { var vm = this; $scope.text = 'Hello World!& ...

htmlangularjskarma-runner

Numerous Fascinating Challenges with React Native

Looking to share my React Native project and seeking help with some issues I'm facing. Despite multiple attempts, I have been unsuccessful in resolving them. Can anyone provide assistance? I have thoroughly searched Stack Overflow for similar questio ...

javascriptreactjsjsonreact-nativegeolocation

Prevent duplicate items in an array by utilizing the Map object to add elements

Looking for a way to update an array by adding new values while avoiding duplicates. I've implemented the usage of a Map object to keep track of existing values and tried filtering the new array accordingly. const [items, setItems] = useState([]); ...

javascriptreactjsarrays

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

Tips on how to seamlessly incorporate a small image file into the background so that it scrolls along with other elements on

I have a CSS code for a small image file (.png) sized 40x40px that I want to use as a background spread all over the body. Initially, I used 'fixed' which worked but the image didn't move with other elements when scrolling. body{ background ...

htmlcssimagetags