Creating a centered transparent rectangle of a specific width using HTML

I am working on a page layout similar to this FIDDLE

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }

Although the background image is repeated, the text on top of it is not very legible.

I am seeking to add a rectangle behind the text to enhance readability. This rectangle should either be of a solid color or 50% transparent. Another idea is to use a small, semi-transparent png that repeats. The width of the rectangle should match the text (800px) and its height should span the entire page.

Is it possible to achieve this? Thank you.

EDIT: Just to clarify, I would like the dark or semi-transparent layer to cover the entire page, from top to bottom. This should include being behind the logo and possibly the footer as well, not just behind the text.

htmlcss

Answer №1

Enclose the text within a div element with a designated id and then apply CSS styling to that specific div.

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0">
<br>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.
</div>

CSS

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }    

#content{
  background-color: rgba(255, 255, 255, 0.84);
  padding: 10px;
  text-align: justify;
  border-radius: 15px;
}

View this Fiddle

Answer №2

I have made adjustments to the code based on your specifications.

Implemented some tweaks to the CSS to center the logo and include a footer.

HTML

<div id="content">
    <IMG SRC="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.</p>
    <p>Nam ut nisi varius, pretium nisl vitae, dignissim lectus. Donec vel tortor commodo, congue sem nec, lobortis neque. Pellentesque tortor elit, aliquam vel porttitor ac, luctus a dolor. Proin fringilla, orci id fermentum luctus, dolor felis convallis mauris, et finibus nunc nulla sed massa. Mauris pellentesque felis eget justo commodo tempor id eu magna. Ut auctor massa vel risus viverra lobortis. Aenean vitae turpis vel erat feugiat ullamcorper. In et erat neque. Nulla efficitur turpis nisl, non dictum leo ullamcorper vel. Vestibulum dignissim venenatis est eget cursus. Cras accumsan placerat luctus. Pellentesque elementum risus nisi, in imperdiet tortor iaculis non. Donec malesuada ut felis at vehicula. Proin quis lorem elit. Nunc at nulla convallis lacus euismod maximus convallis id mauris. Quisque rhoncus tincidunt malesuada.</p>
    <p>Praesent malesuada interdum pretium. In vulputate turpis fermentum dolor sodales, placerat feugiat nibh sollicitudin. Duis egestas, nisl ac mattis elementum, neque tellus sagittis magna, vitae aliquet justo ex id nulla. Suspendisse sit amet porta nunc. Nulla luctus cursus leo ut maximus. Nullam auctor justo eget eros pulvinar varius. Maecenas condimentum neque sit amet lacus rutrum faucibus. Fusce sodales mattis elementum. Morbi tempor purus felis, maximus viverra lorem venenatis ut. Nulla facilisi. Vestibulum condimentum porta lorem. Maecenas nec placerat elit. Phasellus et nisi tincidunt, ullamcorper erat ut, mollis eros.</p>
    <p>Ut scelerisque, quam eu varius consectetur, ex lacus ornare turpis, vitae tempus ex dolor elementum neque. Donec sodales orci nulla, vel semper libero porta nec. Aliquam ut cursus ante. Proin rutrum commodo dui, et posuere purus cursus eget. Mauris egestas vel risus nec consequat. Quisque sit amet leo maximus nunc porta fermentum sit amet non justo. Donec accumsan iaculis suscipit. Phasellus rutrum venenatis neque, dapibus pellentesque eros finibus a. Aliquam tincidunt tortor et ipsum consequat placerat. Vivamus scelerisque libero quis mauris gravida, et tempor elit ultrices. Aenean accumsan porttitor placerat. Phasellus egestas maximus ligula, a imperdiet mi condimentum sit amet</p>
    <footer> <span>www.whatever.com &copy; 2015</span></footer>
</div>

CSS for img

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

CSS for footer

footer {
    bottom:0;
    position:absolute;
    background-color:rgb(90, 90, 90);
    margin-left: -10px;
    width:100%;
    height:30px;
    line-height:30px;
    border-radius:5px;
}

Take a look at this codepen

Answer №3

I made some updates to the code snippet below.
Give it a try

body {
    margin:0 auto;
    max-width: 800px;
    padding:0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;
    color:orange;
}    

.text-container{
    background: rgba(0, 0, 0, 0.49);
    padding: 10px;
}

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

Show specific content based on which button is selected in HTML

I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...

javascripthtmlbutton

Unable to create a polygon on the Google Maps API using GPS coordinates inputted from a text field

I am currently developing an interactive map using the Google Maps API. The map includes a floating panel with two input fields where I can enter GPS coordinates. My goal is to create markers and connect them to form a polygon. While I can easily draw lin ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Adding HTML attributes to a VueJS table allows for more customization and control

Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...

htmlvue.jsvuejs2frontendbootstrap-vue

Can microdata be concealed using CSS without any problems?

Imagine having an HTML document filled with a substantial amount of text. Would it be considered "good" (or at least not bad) practice to include elements containing microdata that are hidden from the user's view? For example: <div style="display ...

htmlmicrodata

Issue with scrollable multilevel dropdown menu

Dealing with an extensive menu list, I aimed to restrict them using a scroll. In the demo on CodePen, everything works fine without the scroll. However, upon adding overflow-y:scroll; height:200px;, it leads to an overflow-x issue and hides all the dropd ...

htmlcssdrop-down-menu

What is the best way to implement data loading on scroll in HTML with AngularJS?

I'm working with a HTML Dynamic Table <div class="clearfix reportWrapper" > <div class="reportTable"> <table class="table table-bordered footerBGColor"> <thead fix-head class="headerTable"> ...

javascripthtmlangularjs

Alter the color scheme of Fancybox's background

I am looking to create a transparent background color for Fancybox. The typical method involves using ".fancybox-skin" in CSS, however this will affect all fancyboxes and I require it to be unique. Therefore, the setting must be sent with wrapCSS. Fancyb ...

jqueryhtmlcssfancybox

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive. <div class="app-container"> <div class="row"> <div class="col-md-1"> <a class="" href="https://www.xxx.org.au"> < ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Tips for managing media queries in HTML emails on Gmail

When sending out my website's responsive HTML emails, I utilize media queries to ensure optimal display. However, I have noticed a discrepancy in how Gmail/Inbox interprets the max-width parameter in the media query. Instead of referencing the HTML em ...

htmlemailgmailmedia-queriesinbox

What is the best method to change the value of a nearby TD text box?

I am currently developing a shopping cart application that requires me to update product screens based on users' previous orders stored as local JSON data. The product screen is built using JSON returned from the server. My goal now is to automatical ...

javascripthtmljqueryjsonangularjs

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

csscss-transitionscss-transforms

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

javascripthtmlcss

Encountering a 404 error in Flask when using a '?' in a redirect

After configuring a payment service on my Flask web app, I encountered an issue where the successful payment processing redirected me to a specific URL. However, upon reaching the URL, I received an error code 404. Strangely, when I removed the "?" from th ...

htmlpython-3.xflask

Creating a perfectly centered square canvas on your screen

In the game I'm developing, I need to position a canvas at the center of the screen. The canvas should have equal width and height, covering the entire screen without overflowing, essentially creating a square shape. Is there a way to achieve this us ...

htmlcsscanvascenter

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...

htmlcss

Choose only the options that are present in both arrays

I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...

javascripthtmlangulartypescript

Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself. This is the exact effect that I am trying to achieve: https://i.sstatic.net/YOLdo.png I am facing two main issues: I am currently printi ...

javascriptcssd3.jscharts

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

What is the best way to prevent my form from saving empty values to the database?

I am currently working on a project for managing library resources using HTML5, PHP, and SQL. I have implemented form validation using PHP for fields such as email, password, name, surname, and phone number. The validation seems to work visually, but it st ...

phphtmlsqlformsvalidation