Various backgrounds in assorted sizes across multiple pages

Take a look at the background feature here:

The background is properly applied to the body element with correct sizing. However, when viewing it on this page:

It appears stretched and distorted. I compared the CSS for both pages using the inspector tool and they seem identical:

body {
    background-image: url('images/aching-soul-background-2.jpg');
    color: #4a2f1f;
    background-size: cover;
}

I'm unsure of what could be causing this issue. Any insights or suggestions would be greatly appreciated.

htmlcssbackground

Answer №1

Try deleting the background-size: cover; By removing this line, your background image will no longer stretch to fit the screen but will repeat vertically instead. The disparity in appearance between the two pages is due to the services page having a greater height. When you employ the cover value for the background-size property, it produces this particular visual outcome.

Answer №2

Consider using background-position:50% 50%;

Additionally, for a large single image to stretch comfortably across a body, you can use the following CSS:

`/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY*/
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;`

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 database table information on a webpage using PHP and HTML

I'm experiencing an issue with my code where I have a SQL table and I want to display it on an HTML page. However, despite having data in my table, the content is not appearing on the page. <?php ini_set('display_errors', &a ...

phphtmlmysql

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

javascripthtmlcss

What is the best way to adjust the max-width CSS media query for zooming effects

Utilizing a CSS Media Query to modify the appearance of my page for narrow screens. For example, if the width is less than 300px, I will set the background color to blue. @media all and (max-width: 300px) { body{ background-color:blue;} } I recently ...

htmlcsszooming

What steps should I take to solve the issue of a black screen showing up once my React website has finished loading

Here's a photo showing error messages displayed on my website. Strangely, there are no errors appearing in my terminal and the website loads perfectly fine. However, I encountered some issues when trying to make styling changes using my dev tools. Aft ...

javascripthtmlcssreactjsnpm

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

htmlcss

What is the best way to locate {Tags} only within the visible HTML content, excluding the elements' attributes?

Is it feasible to extract a specific pattern using only regexp (and possibly php) that falls outside of one pattern but within another in php (or maybe with ?R in php regexp for the recursive aspect)? The objective is to locate the tags between > {This ...

phphtmlregextags

Building a website on Prestashop without disrupting the functionality of the online store

Is it possible for me to make updates to my website without affecting the live Prestashop store? I am looking to modify the template store including ".tpl" files, css, and javascript, but I want to ensure that these changes do not impact the online store ...

htmlcsstemplatesprestashop

What value is used as the default for justify content?

MDN states that the default value of justify-content is normal, even though it's not listed in the accepted values. What exactly does a normal value mean? normal This means that items are packed in their default position as if no justify-cont ...

htmlcssflexboxcss-grid

Ensure that flex items are evenly distributed when they wrap around in the layout

I am facing a challenge with my flexbox container where I want it to display elements in multiple rows when there are more than a set number of items. Below is my current approach: .container { display: flex; width: 400px; background: black; pad ...

htmlcssflexbox

identify the alteration in course

At the moment, I'm engaged in a school assignment during my high school years. I'm interested in finding out if it's possible to access real-time data on different types of manoeuvres, such as turning left or right. Is there a specific funct ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Updating website content dynamically using Javascript and JSON-encoded data

My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...

javascripthtmljsonvariablesundefined

Floating TDs table after four consecutive columns

I am in need of a table that will consist of 4 TDs in each row and then automatically move to a new row. In the HTML, I prefer only listing the TDs because I plan on adding more cells constantly and require them to stay in alphabetical order without having ...

htmlcss

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

I am completely unfamiliar with the connection between HTML and Python, so I am reaching out for some assistance. I hope that someone here can lend me a hand. Currently, my HTML is hosted on an Apache server, and I access the website using the address "". ...

javascriptjquerypythonhtmldjango

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

javascripthtmlvue.jsvue-componentvuejs3

The Overflow-x in CSS and AngularJS

I could use some assistance with css. When adding another hexagon on the right side, it currently jumps down to create a new row rather than overflowing horizontally. How can I make it overflow with a horizontal scroll instead? Below is the css code: #fl ...

htmlcssangularjs

Struggling to make my JavaScript function work across different products

As a beginner in Javascript, I am facing an issue with a button that should open a 'window' when clicked. While it works for product 1 (chili oil), the same functionality is not working for product 2 (raspberry ratafia). Initially, the function ...

javascripthtmldombootstrap-4

Shader that creates a cube map with a unique white line separating the edges

https://i.sstatic.net/f3oDa.png Looking to create a shader that renders a cube map or cube texture as an equirectangular projection. The main aspects are working, but white lines appear between the faces. My approach is: Start with UV coordinates ([0,1 ...

htmlthree.jsshader

creating a div to "embrace" all its inner elements

My HTML code resembles this: <div class="figure"> <img src="some_image.png" /> <div><span class="caption">Fig. 1: Some caption</span></div> </div> Is there a CSS trick that can make the div with class figure ...

htmlcss

Embedding a JavaScript array within another array

My JavaScript array holds records with unique element indexes. Now, I need to figure out how to add single or multiple components to the same array for a particular element (with the same element index). This array can contain as many elements as needed a ...

javascriptjqueryjsonhtml

Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow. Upon furthe ...

javascriptcssgoogle-mapsinfowindow