Creating a stunning full-screen background effect using HTML and CSS with the help

I'm currently designing a website with a full-screen background image. To ensure compatibility on all screen sizes, I've incorporated the jQuery Backstretch plugin.

However, I've encountered an issue where the text embedded in the background image overlaps with other elements when the screen size is reduced.

To better illustrate this issue, you can view the actual page here. If the page width falls below 1700 pixels, the problem becomes evident.

Does anyone know of a solution to address this problem without separating the text from the background image?

javascriptjqueryhtmlcssfullscreen

Answer №1

One way to achieve this effect is by utilizing background-size: cover;

{
      background: url(http://example.com/image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Alternatively, you can specify a different image for various screen sizes using media queries 

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

Answer №2

To enhance readability on smaller screens, consider adding a semi-transparent background to the text using a media query:

@media screen and (max-width: 795px){
    #map_text {
        background: rgba(0,0,0,0.7);
    }
}

Ensure you place this code at the end of your CSS file.

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

Retrieve data from JSON using AJAX

I am working with an API that provides JSON data in the following format: [{ "Code": "001", "Name": "xyz", "Members": [{ "FullName": "User1" }] }, { "Code": "002", "Name": "asd", "Members": [{ "FullName": "User2 ...

javascriptjqueryjsonajax

Capture the mouse's coordinates using the mousedown and mousemove events

When the user clicks on the slider, my jQuery script tracks the mouse coordinates. However, even after releasing the mouse button, the function continues to run. $("slider").mousedown(function(){ $(this).mousemove(function(e){ console.log(e.cli ...

jquery

Incorporate the content of an HTML file into a Django template by substituting a portion

I am encountering an issue with replacing a portion of a website that was created using Django with different content. The code snippet in question looks like this: <section id='main_page'> <div id="main_div"> <--! inc ...

pythonhtmldjangodjango-templates

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

Issue with integrating Contact Form 7 HTML into Wordpress

I've revisited this question with a new "input" HTML tag Despite changing everything, CSS still isn't being applied. HTML Code : <form action="#" class="contact-one__form row"> <div class="col-lg-6"> ...

htmlcsswordpresscontact-form-7

Issues with the transparency of a basic tab image gallery (CSS + jQuery)

My tab image gallery project is nearly complete, but I'm facing some challenges with the styling. The default thumbnail doesn't load with maximum opacity as intended and my jQuery code seems to be interfering with the hover effect of my CSS. I di ...

htmljquerycss

"Disabling a FormControl within a FormArray in Angular 4: A Step-by-

I've come up with a code snippet below that I thought would disable the FormControl in a FormArray. some.component.html <form [formGroup]="testForm"> <div *ngFor="let num of countArr"> <input type="text" formNameArray="arr ...

javascriptangulartypescriptangular-formsangular-formbuilder

Error encountered: No geographic indices found for executing a geoNear operation with Mongoose

Initially, I had divided the schemas but later nested them inside my overall document. Despite adding indexes and removing coordinates from location, there seems to be an issue with the nested points. Upon running get Indexes, it shows that there is an i ...

javascriptnode.jsreactjsexpressmongoose

What is the best way to send multiple values via ajax?

view error screenshot Upon clicking the button, a function is called which returns certain values. These values need to be retrieved and sent via AJAX using jQuery. Below is the function that is called upon clicking the button. Within this function, anot ...

jqueryajax

Is it possible to adjust the background image with properties like Scale to Fill, Aspect Fit, or Aspect Fill?

Is it possible to set the background image using the following properties in HTML? (These are properties used for iOS images, but I am unsure if there are similar ones in HTML): Scale to Fill, Aspect Fit, Aspect Fill https://i.stack.imgur.com/5X83I.jpg ...

htmlcssimage

What is the process of matching a server response with the appropriate pending AJAX query?

Imagine a scenario where my web app utilizes AJAX to send out query #1, and then quickly follows up with query #2 before receiving a response from the server. At this point, there are two active event handlers eagerly waiting for replies. Now, let's ...

javascriptajaxasynchronous

How can users change the displayed Twitch channel?

My coding skills aren't the greatest, especially when it comes to something like this. I've tried searching for a solution with no luck, so I apologize if this is too basic or impossible. I have a simple page that loads up Twitch with a predefin ...

javascripthtmltwitch

How can we begin to create this dynamic animation?

Can someone help me figure out how to create an animation effect similar to the one seen in this link? I have some basic knowledge of css and html5, but I'm not sure where to start. Is this done with css, html5, plugins, or something else? I am looki ...

csshtmlweb-animations

Creating a custom function that targets a specific element

When working with JavaScript, you may often encounter functions written in the form of document.getElementById("element").someFunction(); or $("element").someFunction(); rather than the traditional someFunction($("element"));. This is similar to a function ...

javascriptjquery

Discovering individuals who have liked a photograph in a PHP and MySQL database

Currently, I am developing a platform for sharing and liking images online. Each time a user likes an image, the total like count increases. However, the challenge lies in determining if the current user has already liked a picture upon logging in again. ...

javascriptphpmysql

Visuals failing to display following Angular project compilation

After completing the coding for my app, I attempted to put it into production mode and after testing, I noticed that the images were not displaying as the logo in the app. However, in development mode, everything seems to be working fine. This is the struc ...

javascriptimageangularangular-cliproduction-environment

Ensuring User Information Persistence in React Upon Successful Login

I am developing a small application using React with PHP as the back-end. Within my database, I have two types of users - admin and student. Upon user login, I store their information in session storage like this ( user: { username:'abcxyz123', r ...

javascriptreactjs

Issue with Angular Material Mat Horizontal Stepper: Incorrect step selection when progressing with next button

I have a horizontal mat stepper that needs to be controlled using Next and Back buttons. The steps are generated using ngFor. I have created a variable called "stepIndex" which is bound to the "selectedIndex" input. The Next button should increment this va ...

htmlangulartypescriptangular-material

Node.js async.each triggers the error message "Callback has already been invoked"

I seem to be facing a problem that I can't pinpoint despite searching for mistakes extensively. The issue arises when async.each throws a "Callback was already called" error. Below is the code snippet where I encounter this problem: async.each(this. ...

javascriptnode.jsasynchronouscallback

Using a for-each loop to wait for the completion of an Ajax process

for (var i = 0; i < theTagNames.length; i++) { var url = baseURL + "?" + "jsoncallback=?" + "&method=flickr.photosets.getPhotos" + "&format=json" + "&api_key=" + api + "&photoset_id=" + theTagN ...

jqueryajaxjsonfor-loopflickr