The size of the SVG background is not adapting to the container's dimensions

I've been struggling to make sure the svg background-img covers the entire element, regardless of the screen size it's viewed on. Unfortunately, I haven't had any success.

I attempted removing the width and height attributes from the svg, setting the background-size to cover, and adding preserveAspectRatio="none" within the svg code, but none of these solutions worked for me.

If anyone could offer some assistance, it would be greatly appreciated.

This is my SVG, mountains.svg:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     preserveAspectRatio="none" viewBox="0 0 1024 800" xml:space="preserve">
<g>
    <polygon fill="#3C5E7E" points="661.914,566.889 700.57,529.312 721.889,593.389  "/>
    [additional SVG polygon elements]
</g>
</svg>

This is my HTML:

<style>
#header {
    margin:0 0 0 0;
    height: 110%;
    background-image: url(mountains.svg);
    background-size:cover;
    background-position: 0 -50px;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
}
</style>
<body>
<div id="header">

</div>
</body>

https://i.sstatic.net/EueZh.png

htmlcsssvg

Answer №1

I have tested the following code and it is functioning correctly; the issue may lie within your stylesheet implementation.

#header {
    margin: 0 0 0 0;
    display: block;
    height: 100vh;
    background-image: url("mountains.svg");
    background-position: 0 -50px;
}

If you specify the attribute height in the parent of the header, you can set the value to inherit for this property.

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

Guide on accessing a method from a div element in VueJS

Is there a way to only render a div based on a specific condition and call a method when the condition is true? Here's an example of what I'm trying to achieve: <div v-if="timetable === null" @click="mymethodhere"> ...

javascripthtmlvue.js

Listening for Events on Multiple Groups of Radio Buttons

How can a dynamic Javascript/JQuery event listener determine which radio button group has been clicked and retrieve the value of the checked element? If there are two radio button groups, how would you differentiate between them? How could this be achieved ...

javascriptjqueryhtmlcss

The position of the absolute item is not determined in relation to its container

I am experiencing an issue with two items in a 'relative' container. The problem arises when the 'absolute' item should be positioned relative to the container, but instead, it is being placed relative to the second 'static' ...

htmlcssabsolute

Submit the scaled-down form image to the server

When attempting to upload a resized image to the server, an error stating "Required MultipartFile parameter 'file' is not present" occurs. Interestingly, this error only appears when trying to upload the resized image, as uploading the original f ...

javascripthtmlajaxupload

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Seeking assistance to tackle this issue. I currently have an HTML table with a clickable event that triggers a dialog box. My goal is to also retrieve the index of the row that was clicked, but the current output is not what I anticipated. //script for the ...

javascripthtmljquery-uijquery-events

Stop a form field from being visible on the screen

I'm working on a project where I would like to hide the user field in the form. models.py class Questions(models.Model): user=models.ForeignKey(User) category=models.ForeignKey(Categories) question=models.TextField(max_length=500) cr ...

pythonhtmldjangoaptana

Techniques for determining if a file is empty using jQuery

Just starting out with JS. I want to validate the file input element before form submission using jQuery/JavaScript. I've researched various solutions, but nothing seems to be working for me. I'm trying to avoid displaying "/c/fakepath" as the ...

javascriptjqueryhtml

Dealing with Bootstrap 3 compatibility issues in IE8: Finding solutions for mobile-like behavior

Currently, I am in the process of completing this website at . Most aspects of the site display properly on all standard browsers, however, there seems to be an issue with IE8. It appears as if the layout is behaving like a mobile view, with all containe ...

csstwitter-bootstrapinternet-explorer-8media-queries

Adjust the div height to 100% in Bootstrap to center text, even with the presence of a navbar

I'm currently using Bootstrap 5 and facing an issue with getting text centered vertically on the page. I attempted to make the container of the div take up 100% of the page by using h-100, but it resulted in overflow due to the navbar occupying some s ...

htmlcsstwitter-bootstrapwebbootstrap-5

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following: A fixed header with each column having the same width as its respective row An x/ ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Is there a method to generate an endless carousel effect?

Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't ...

javascriptcssscrollcarouselinfinite

Why is the scrollHeight property of an element not updating when the display of its inner element is changed to 'none'?

For the sake of learning, I am attempting to develop a bootstrap-style navbar using angularJS 1.3.14. My approach involves creating directives for the navbar, navmenu, navMenuToggle, and navDropDown, with the navMenu serving as a container for toggle and d ...

javascriptjquerycssangularjs

Rotating and moving two boxes using CSS3 transformations

I have two boxes, each measuring 200px by 200px, that I would like to animate using CSS animations. The first box (upper box) should rotate from rotateX(0deg) to rotateX(90deg) with a transform-origin of center top. The second box should follow the bottom ...

htmlcssanimation

The MAC slideshow circles at the bottom have been mysteriously chopped off

Utilizing the popular JQuery plugin Cycle for a slideshow on this site: bybyweb.com/pbm An issue has arisen - everything functions as expected on windows (across all major browsers), BUT on MAC (running lion 10.7.5, tested on one machine so far; unsure of ...

jqueryhtmlcss

Refreshing the AngularJS application by re-rendering the view without the need for a full reload

I am currently working on an application that heavily utilizes the ng-include directive, and one thing I cannot stand is having to reload the entire application just to see a simple HTML update. I have experimented with manually replaying the XHR in the N ...

javascripthtmlangularjsajaxxmlhttprequest

Changes to CSS rules were implemented using Javascript, causing visible effects in Chrome but not in Firefox or Internet Explorer

My website features a unique toggle function to show and hide divs, activated by clicking a button. While this functionality is flawless in Chrome, other browsers are not cooperating. The issue lies with my JavaScript code that adds an event listener for ...

javascripthtmlcsscross-browser

Names picked at random and presented in the innerHTML

I am currently working on a project that involves displaying random names from an array in a text area named "textbox". Currently, I am using math.random() to pick a name randomly, but it only generates a new random name when the page is reloaded. How ca ...

javascriptphpjqueryhtml

Organizing Content with Bootstrap - Utilizing Sections and Divs

Currently utilizing a Bootstrap template for my website development, I am encountering two challenges that have me stumped: 1) Upon placing my HTML code within a <section>, an automatic top margin/padding seems to be applied to the section. Despite ...

htmlcssbootstrap-4

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

javascriptjqueryhtmlcssangularjs

Styling div elements within other div elements using CSS

I am currently working on creating a layout with three divs, each containing an image. The challenge is to set the height of the first div (top) to 10% of the screen size, the second (middle) to 60%, and the third (bottom) to 30%. I want these divs to main ...

htmlcss