Restricting CSS Background Image Width to 960 Pixels

Question

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body.

body
{
    width:960px;
    margin: 10px auto 10px auto;
    background-image:url(logo.png),url(backgroundimage.jpg);
    background-position: top center, top center;
    background-repeat: no-repeat, repeat-x;
    background-attachment: static;
}

The image logo.png represents a company logo, while backgroundimage.jpg should only span within the 960px width instead of filling the entire page. How can I achieve this?

html css

Answer 1

Answer №1

To create a container class that will hold all inner div classes and content, you can use the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <style>
  .container{
    width: 960px;
    background: url("logo.jpg");
    height: 700px;
  }
  </style>

  <body>
    <div class="container">

    </div>
   </body>
</html>

Alternatively, you can make use of the Bootstrap framework, which offers a premade .container class with built-in responsiveness features for a simpler solution.

Answer 2

To create a container class that will hold all inner div classes and content, you can use the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <style>
  .container{
    width: 960px;
    background: url("logo.jpg");
    height: 700px;
  }
  </style>

  <body>
    <div class="container">

    </div>
   </body>
</html>

Alternatively, you can make use of the Bootstrap framework, which offers a premade .container class with built-in responsiveness features for a simpler solution.

Restricting CSS Background Image Width to 960 Pixels

Answer №1

Similar questions

Error Occurred: Angular View Not Loading

Menu toggle vanishes suddenly

Looking to connect information

Issues with the collapse feature in Bootstrap 5.1.3 accordion

Guide on how to dynamically add AJAX JSON array response to an HTML table

Stripping CSS prefixes upon file initialization

Tips for utilizing an adaptive design with Angular

Enhance a Javascript object by dynamically introducing new elements

Creating a personalized .hasError condition in Angular 4

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

Obtain the context within the image loading function

Using javascript to transform the entire list item into a clickable link

I am encountering difficulties with generating images on canvas within an Angular environment

Troubleshooting a Messaging Error between Background and Another Script

Adding an arrow to a Material UI popover similar to a Tooltip

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Error in Firefox: "Anticipated media feature name, but discovered 'hover'"

Utilizing ajax for fetching a data table

Tips for deactivating dropdown values based on the selection of another dropdown

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs