What is the best way to display text on top of a background image?

After successfully setting a photograph as the background of my website and ensuring it fills the page without tiling, I encountered an issue with positioning the navigation bar in the center of the image. Despite specifying the image as a background element, the navigation bar is still hidden behind it. How can I resolve this and make the navigation bar appear in the center of the image?

<div>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img id="backgroundimage" src="websitebackground.jpg" />
        </td>
    </tr>
</table>
</div>
<style>
body, html { margin:0; padding:0; height:100%; }
#backgroundimage { position:fixed; left:0; top:0; z-index:1; height:100%; width:100%; }
</style>
htmlcssnavigationbackground-image

Answer №1

Avoid using tables unless you are presenting data in a tabular format. Instead, consider implementing a structure similar to the following:

HTML

<div id="backgroundimage">
    //insert header content here
</div>

CSS

#backgroundimage{
    background-image: url("path-to-your-image");
    //add any additional styles here
}

Answer №2

The image was not properly attributed, it should be used as a background image like this:

<body background="websitebackground.jpg" id="backgroundimage">

This will place the image in the background behind the text.

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

Learn the process of dynamically adding new rows and assigning a distinct ng-model to each row

Does anyone know how to create a dynamic table in HTML with unique ng-models for each cell? I've tried the following code, but I'm struggling to figure out how to add ng-model. <!DOCTYPE html> <html> <head> <style> table, ...

htmlangularjs

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

javascriptjquerycss

PHP causing SQL hiccup

Hey everyone, I've been struggling with this PHP code that keeps giving me an error when trying to add students. Check out the code snippet below: https://i.sstatic.net/EW7oM.png And here's the error message it's showing: https://i.sstat ...

phphtmlsql

Watching a live video stream in real-time using WebRTC with React

Here is the HTML code <video ref={videos} autoPlay ></video> <Button onClick={() => navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => { videos.srcObject = mediaStream; videos.onloadedmetad ...

javascripthtmlreactjswebvideo-streaming

FAQs about utilizing percentage width and margins in CSS with Bootstrap

Currently, I am working on a mobile responsive web design using Twitter Bootstrap 3, and I am facing challenges with margins and resizing. I previously asked about creating a mobile-first responsive web design along with responsive images, which you can f ...

htmlcsstwitter-bootstrapresponsive-designmargin

PHP validation process results in failure to insert data into database

Need help with my HTML and PHP validation code in "postresume.php" <?php $firstName = $lastName = $emailId = $phoneNo = $qualification = $dob = $totex = $address=""; $firstNameErr = $lastNameErr = $emailIdErr = $phoneNoErr = $qualificationErr = $dobErr ...

phphtmlmysqlcss

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

htmlaudioogg

React Native Navigation Troubles

I attempted to integrate React Native Navigation (StackNavigator) into my app, but encountered issues. I used the command "npm install --save react-navigation" to include StackNavigator in my app, but unfortunately, it resulted in the following error: S ...

reactjsreact-nativenavigationnative

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Including a JavaScript file using script tags can cause issues with jQuery UI

I've been working on this issue for quite some time now and it's proving to be quite challenging. The problem I'm facing involves incorporating jQuery UI's datepicker into my HTML page which is already being controlled by some Javascri ...

javascriptjqueryhtmljquery-ui

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

htmlcssangulartypescriptangular2-template

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence. ...

htmlcssfontsbootstrap-4

Is it possible to set all UI forms to a readonly/disable mode?

We have a specific requirement where, if the user's access level is set to "READ ONLY", all form input elements should be made readonly. Our coding approach involves using a template HTML that contains widgets which are referenced in the correspondin ...

javascripthtmldojodijit.form

Using a for-loop to add HTML Ids sequentially

I'm a beginner in JavaScript and HTML, and I've been working on reading my JSON file and appending it to various HTML IDs. I was curious if there is a more efficient way of doing this using a for-loop? for(let i=0; i<5; i++){ $(`#vid${i ...

javascripthtmljson

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

javascriptcsshtmllightbox

How can I showcase the initial page on my local server?

Currently, I am utilizing Xamp for website development. Within my project directory, there is a folder named HTML which contains a page called Cart.html. This HTML folder is located in the htdocs directory. My goal is to have the Cart.html page automatic ...

htmlxampphtdocs

Tips for successfully passing array index as an image source in Vuejs with v-img?

Hi there! I'm currently attempting to cycle through an array of URLs and insert them into the src attribute. I'm struggling with the correct syntax to accomplish this task. Would you be able to lend a hand? I have an array named DataArray that co ...

javascripthtmlvue.jsvuejs2vuetify.js

Font transparency is not displaying properly

I am attempting to adjust the opacity of text displayed on a d3 pie chart, but I'm facing issues where only the fill is rendering correctly and not the opacity. Below is the code snippet where I am trying to apply opacity: var txts = svg.data([json ...

javascripthtmlcssd3.js