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

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

jqueryhtmlmenutoggleslidetoggle

Infusing JavaScript with vibrant images

I am currently facing an issue where I am trying to insert images with JavaScript attached to them. Oddly enough, it seems to work fine on Firefox but the images or icons do not display on Internet Explorer. This is how I have written the code: <a hre ...

javascripthtmlimage

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

I am currently working on developing an on-screen keyboard that allows for navigation using arrow keys and selection with the enter key. My goal is to have each selected key append to an input field. Below is the HTML code I have implemented: <div id ...

javascriptjqueryhtml

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

javascriptjqueryhtml

Unable to adjust SVG fill color

I'm having trouble changing the fill color of an SVG when the user hovers over it. Can someone help me figure out why my code isn't working? svg:hover { fill: blue; } <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 ...

csssvg

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

Adding a div via an Ajax call is only successful during the initial page load

Currently, I am utilizing a combination of YQL and jQuery to retrieve content from a distant page. While I am able to successfully load the content during the initial page load, I encounter an issue when attempting to return to the same page after navigati ...

jqueryhtmlajaxdomdocument

Strategies for accessing elements within a #shadow-root

Having trouble changing the display style inside of the #shadow-root and targeting it. Can I do it through CSS or JS? #retirement-services-modal #rs-two-col::shadow(.wrapper) { display: flex; align-items: center; } ...

htmlcssuser-experienceshadow-root

Can you tell me if the "dom model" concept belongs to the realm of HTML or JavaScript?

Is the ability to use "document.X" in JavaScript to visit an HTML page and all its tags defined by the HTML protocol or the ECMAScript protocol? Or is it simply a choice made in the implementation of JavaScript, resulting in slight differences in every bro ...

javascripthtmldommodelprotocols

What is the best way to apply maximum height to an element using CSS?

Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...

htmlcsstwitter-bootstrap

Troubleshooting problem with CSS scaling on smartphones

I'm attempting to create a website (the first one I've ever designed) dedicated to my girlfriend's cat. However, when viewed on a mobile device, it doesn't look good. I've made an effort to adjust the meta viewport tag, but it does ...

htmlcss

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

phpjavascriptjqueryhtmlajax

Enabling Javascript's power-saving mode on web browsers

I created a JavaScript code to play music on various streaming platforms like Tidal, Spotify, Napster, etc., which changes tracks every x seconds. If the last song is playing, it loops back to the first song in the playlist since some websites lack this fe ...

javascripthtmlmemory-consumption

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

javascriptcssreactjsflexboxmaterial-ui

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5

Is there a way to transfer a significant volume of data from one webpage to another without relying on the POST

Currently, I am utilizing a web server framework that exclusively operates with GET requests. Presently, my task involves transferring a substantial volume of data (specifically the text content in a textarea) inputted by users onto another page where it i ...

javascriptphpjqueryhtmlapache

Error message appearing repeatedly and submit button functioning only after second click

I am currently working on my CS50 Final Project, where I am in the process of designing a web app using Flask. Specifically, this issue arises in the login/register page where I am attempting to verify if the username is already taken (through jsonify) and ...

javascriptpythonjqueryhtml

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

Turn off the feature that highlights links

Hi there! I'm curious to know if it's feasible to remove the highlighting effect when clicking on a link. I'd like the link to function more like an image, without the appearance of a highlighting box upon clicking. ...

javascripthtmlcss

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

javascripthtmlcssangularjs