The background image is tiled repeatedly across the screen

I am facing some challenges with setting a background image in my asp.net web application.

The issue is that when I set the image to no-repeat, it displays according to its resolution of 640*480 and the rest of the page remains blank.

However, if I don't apply any repeat properties in the css file, the image appears as one and a half images.

I am looking to have the image stretched across the entire screen.

Below is an excerpt from my CSS file:


body {
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
} /*default setting */

<body style="background-image: url(' <%= imgPath %>')" >
</body>

Any suggestions or advice on how to achieve this are greatly appreciated!

Thanks so much!!

cssasp.net

Answer №1

To achieve a full background cover without repetition, use the following CSS properties:

body{
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

Check out the live DEMO here!

Answer №2

Have you considered using background-size property?

Learn more about background-size on MDN

For example:

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

or

/* Make sure to include vendor prefixes */
background-size: 100%;

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

Adjust the alignment of the text to match the orientation of the image

When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px. The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed ...

htmlcss

Using a simulation to deactivate webpage elements and showcase the UpdateProgress control

I am currently attempting to disable certain page elements and display an update progress control in my application. In order to achieve this, I have applied a style sheet with the property filter: alpha(opacity=85); However, I encountered an error stati ...

c#asp.netcssajax

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Changing the color of an element on click using jQuery's .css() method,

There is a table and I am using fadeToggle on the list to hide and show the table. The background of the list is green color, but I want to change the list color when hiding the table and revert it back to green when clicking to show the table. Unfortunate ...

jquerycss

Troubleshooting the Owl carousel's responsiveness with a div width of 1170px

Whenever my display size is less than 1170px, the width of the owl carousel div overflows. How can I fix this issue? jQuery(document).ready(function($) { "use strict"; // CUSTOMERS TESTIMONIALS CAROUSEL $('#customers-testimonials&a ...

javascriptjqueryhtmlcssajax

Designing an HTML and CSS footer navigation bar

Can you help me create a footer menu using HTML and CSS? Check out this image for reference Any tips on how to style it with cascading style sheets? <footer> <ul> <li><a href="">Home</a> </li> <li> ...

htmlcssmenu

Examining pseudo-elements on Internet Explorer

Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...

css

How come my footer is appearing at the top of my webpage?

I have encountered a problem where the footer is displaying on top of my page, despite not using any floats, wrappers, or grids in my code. The code snippet can be found below this text. Could someone assist me in identifying why this issue is occurring ...

htmlcssfooter

unable to retrieve data using ajax

Having some trouble with my ajax code that is supposed to print values: success: function(returndata) { $('#first').html("<div id='first' class='progress-bar progress-bar-primary' role='progressbar' aria-valu ...

javascriptjqueryhtmlcssajax

ASP TextBox functionality for inclusion of decimal values using a period (.)

In one of my ASP pages, there is a TextBox with a Type of Double in the front end code and a Decimal type in the back end code. Below is the representation of the TextBox: <asp:TableCell> <asp:TextBox ID="txtPremium" ...

asp.netvb.nettextboxdecimal-point

Utilizing jQuery for seamless transitions between multiple background images

Looking to create a dynamic page using jQuery that alternates between different large background images for a fading effect. How can I achieve this? ...

jqueryhtmlcss

Formatting a span class within a bullet point item

How can we apply styling to a span class within a list item using CSS? I have attempted the following code, but it does not seem to be working: wrap.error { color: #FF0000; display: block; } <ol> <li> <span class='error&ap ...

htmlcss

Connect HTML and CSS files to your Meteor project

I need to incorporate a pre-existing lengthy form that includes both CSS and HTML files into my current meteor project. How can I achieve this? Is it possible to accomplish it in the following manner: <template name = "premadeForm"> somehow con ...

javascripthtmlcssmeteor

The Angular overlay panel remains open consistently

I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another ove ...

htmlcssangulartypescript

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

javascriptjqueryhtmlcss

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

htmlcsstwitter-bootstrapbootstrap-4

The malfunction of the AJAX toolkit SliderExtender is triggered by the ASP.NET timer

In my current setup, I have implemented 2 update panels with UpdateMode set to "Conditional". The first update panel consists of: 2 AJAX toolkit SliderExtender components 2 corresponding Text Boxes Within the first update panel, I have configured the T ...

asp.netajaxajaxcontroltoolkit

difficulties encountered when implementing a sticky footer with two distinct footer sections

Currently, I am teaching myself web development and reconstructing a website from scratch. The layout should resemble the following: ===========Navigation Bar=========== =========Website Content=========== ===========Footer #1============ ===========Fo ...

csshtmlsticky-footer

- bullet point: tabulated

I need to create an unordered list with URLs included and indented, while keeping all lines justified to the left. * line one text text ted more text text text * line two text ted more text text text * line three text ted more text text text ...

css

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface