Utilize background-size:cover and incorporate text in a horizontally scrolling webpage

Struggling to create a minimalist HTML layout with a horizontal scrollbar, featuring a large image on the left and a lengthy text with columns on the right? I suspect the issue lies in the implementation of position:relative with float, as well as position:absolute with left, but I can't seem to resolve it. Presently, the cover image displays correctly in the top left corner, but the text appears in the bottom right instead of the top right of the image.

Could you offer some assistance?

Take a look at this demo showcasing my current progress: http://jsfiddle.net/kz5ch49w/38/

htmlcsscss-positionbackground-size

Answer №1

It seems that in order to correctly achieve your goal, you should place the text inside your cover id instead of a separate div. You can adjust the position of your cover id to be absolute, while setting the position of your text div to be relative.

#cover { position:absolute; /* other styles */ }

and

#text { position:relative; /* other styles */ }

http://jsfiddle.net/kz5ch49w/46/

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

Is it possible to adjust the dimensions of the number input spinner?

When working with a number input that includes a spinner, I have encountered challenges in changing the size of the spinner itself. Specifically, I am referring to the <input type='number'> element. Despite my efforts to adjust its size thr ...

csshtml

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

I am attempting to load a .php file that contains a 2Mb image into a specific div. While I can make this work with ajax, my issue is that I only want the content of the current div to be replaced with the new one once the image finishes loading. Currently ...

phpjqueryhtmlajaxloading

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

I am experiencing issues with the HTML footer not displaying correctly on my website

My GitHub Pages hosted website is giving me trouble with the footer styling. No matter what I try, I can't seem to get the background color to show up: h1 { background-color: #000000; } I'm attempting to create a footer similar to the one at ...

htmlcss

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

Currently, I am facing an issue while trying to develop a form with radio button choices using Django. The website is based on Bootstrap 4 theme and encountering a problem where the buttons disappear upon applying the custom-control-input class. I initial ...

pythondjangohtmlbootstrap-4

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

My attempt to incorporate an ajax loading gif into my website has been met with technical difficulties and is currently not functioning as

I am currently developing an uploader feature for my website located at To enhance user experience, I aim to display a loading animation in the form of a .gif image while the select box is being populated with subcategory options via an AJAX request. Bel ...

phphtmlajaxgifloader

Unable to use Selenium web driver for C# to choose an element by its tag name

Currently, I am utilizing Selenium Web Driver in C# to interact with Google Chrome browser. However, when attempting to retrieve the inner HTML (text) of a specific element as shown in the provided HTML snippet below, an error message "no such element ...

c#htmlseleniumselenium-webdriverselenium-chromedriver

Taking pictures with the camera in three.js on an iPhone

While working on a project that required capturing the camera video stream as a texture in three.js for mobile phones, I encountered an issue. The code I was using ran smoothly on Android devices but not on iPhones. Ideally, when the user grants permission ...

htmlthree.jshtml5-video

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

What is the best way to vertically align an InputLabel within a MUI Grid item?

I'm trying to vertically center the InputLabel inside a MUI Grid item. Here's what I've attempted: import { FormControl, Grid, Input, InputLabel, TextField } from "@mui/material"; export default function App() ...

javascriptcssreactjsmaterial-ui

WordPress WooCommerce causing the right bar to be pushed below

I'm currently facing an issue on my WordPress site with a purchased template and Woocommerce integration. The problem lies in the fact that the right sidebar gets pushed down on the shop page. When I reached out to the template developers, they sugges ...

phpcsswordpresspluginswidget

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

javascripthtmlangularjs

Received a notification after submitting an HTML form

<html> <body> <form action="" method="GET> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> <?php if( $ ...

phphtml

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

javascriptphphtmlajax

Showing no background color until the user lifts their finger

I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...

javascriptjqueryhtmlcss

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson

Tips for keeping a dynamic height div in place without affecting surrounding elements

HTML: <div id="autocomplete" hidden></div> <input type = "button" id = "search" value = "Search"> The autocomplete div contains dynamically generated input tags created by jQuery. These input tags cause the button to be shifted down the ...

css