Build a home page in HTML with full width design

My webpage currently allows scrolling to the right and left in HTML.

I would like to change this functionality.

What I envision is having my cup and book visible without the need for scrolling, with a background image centered on the page.

  <div class="container maindiv " >    
    <img class="img-responsive book" src="http://i.imgur.com/dLCTiyn.png">
    <img class="img-responsive cup" src="http://i.imgur.com/AULhYEH.png">
  <div class="black_bg">
    <ul class = "menudiv">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  <div class= "para">
   <p>
     lorem ipsum
   </p>    
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
 </div>    

    <div class= "para1">
   <p >
     lorem ipsum
   </p>    
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
    </p> 
 </div>     
 </div> <!--black_bg-->
</div>

The cup and book images should be positioned on either side of the background image.

For further reference, please see this demo link.

Your suggestions are welcome.

htmlcss

Answer №1

Give these CSS classes a shot:

.cup{
    height:167px;
    position:absolute;
    left:0;
    top: 134px;
    z-index:1000;
}

.book{
    height: 167px;
    position: absolute;
    right:0;
    top: 134px;
    z-index:1000;
}

Answer №2

If you want to achieve this effect, make sure to utilize the position:fixed property for both images and specify valid values for left and right positions like so:

.cup{
     height: 167px;
     position: fixed;
     //left: -158px;
     top: 134px;
     z-index: 0;
 }

.book{
      height: 167px;
      position: fixed;
      right: 0px;
      top: 134px;
      z-index: 0;
 }

Check out the working demo below:

DEMO

Answer №3

Does this meet your requirements?

https://jsfiddle.net/tL9raxfL/14/

.cup{
 height: 167px;
position: fixed;
//left: -158px;
top: 134px;
z-index: 0;
}

.book{
 height: 167px;
position: fixed;
right: -200px;
top: 134px;
z-index: 0;
}

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

What is the best way to protect old documents when selecting new files in a multi-file uploader?

I created a file upload feature with file previews using HTML5 and the file reader, which is functioning well. However, I'm facing an issue where old files selected by the user get removed from the input file field if a new file is selected in a singl ...

javascriptjqueryhtmlfilereadermultiple-file-upload

Unable to load JQuery from a div element

My goal is to create a standard .html file containing the navigation, footer, and other elements that will be used across multiple pages for a small site I'm building. I want to keep it simple and avoid using php or other programming languages. I&apo ...

javascriptphpjqueryhtml

Having trouble using Selenium for Chrome to locate an element in an HTML file using C#?

I am currently utilizing Selenium to locate elements within an HTML document that is being displayed in the Chrome browser. Unfortunately, the HTML code is not created by me and appears to have numerous issues. I do not have the ability to modify how it is ...

c#htmlselenium-webdriver

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Currently, I am utilizing *ngFor to display some data. I have a requirement to extract a specific value from *ngFor and display it in, for instance, my heading. However, when I attempted to use {{ project }}, it consistently returned undefined. Despite hav ...

htmlangulartypescript

There seems to be an issue with the Angular QuickStart project as it is not functioning properly, showing the error message "(

After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...

htmlangulargoogle-chrometypescriptvisual-studio-2015

Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...

htmlcssborder

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...

javascripthtmlvideohtml5-video

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss

When the source file is located in other directories, gcovr fails to generate a comprehensive report

I'm having trouble getting the correct HTML output from gcovr when the source file is located relative to my root directory. Let me illustrate with two cases where gcovr works and where it encounters issues: CASE:1 - Successful execution of gcovr Af ...

htmlrelative-pathgcovcpputestgcovr

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

What is the reason behind HTML comment delimiters failing to function within HTML style tags?

Currently, I am utilizing CSS and HTML in my project. To implement styles, I am utilizing both an external stylesheet as well as a "style" element within the HTML to override certain styles. However, I have encountered an issue. When I insert an HTML comm ...

htmlcss

Dynamic HTML text colors that change rapidly

I have an interesting question to ask... Would it be possible to create text that switches between two colors every second? For example, could the text flash back and forth between red and grey? I don't mean changing the background color, I mean act ...

javascripthtmlfontscolors

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Have a look at this concise sandbox that mirrors the code provided below: import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { let [tag, setTag] = useState(null); function chan ...

javascripthtmlcssreactjs

Retrieve the AngularJS scope object by using an alternate scope object as the identifier

As I loop through an array of person objects using ng-repeat, imagine the array looks something like this: [{ "display_name": "John Smith", "status": "part-time", "bio": "I am a person. I do people stuff.", }, { "display_name": "Jane Doe", "stat ...

javascripthtmlangularjs

Improving JavaScript event management efficiency through handling numerous asynchronous HTTP requests

Summary: In a SPA CMS project, multiple dynamic data sources are causing performance issues due to a large number of asynchronous HTTP calls required to display a table with extensive data. The challenge is to maintain good performance while handling the ...

javascripthtmlperformancegraphqlweb-worker

Bulma: Tips for creating equally sized buttons?

I am working with Bulma CSS and trying to ensure that all my buttons are the same size. Currently, each button appears to have a different size based on the text content. I have looked into using the "is-fullwidth" option, but it makes the buttons too la ...

htmlcssbulma

When you press the submit button, the screen automatically scrolls down but no action is taken

I'm currently utilizing Selenium WebDriver (Java) with the Firefox driver. Upon trying to click the 'Submit' button on a particular page, it only results in scrolling down the screen slightly. The button itself does not register the click, c ...

javascripthtmlseleniumselenium-webdriver

eliminate the script and HTML comment from a designated division

Here is the default code that I need to modify using JavaScript to remove scripts, comments, and some text specifically from this div: I came across this script that removes all scripts, but I only want to remove specific ones from this div: $('scri ...

javascriptjqueryhtml