Adjusting the height of the background image using a percentage value

I'm struggling to get my background image to fill 100% of the width and only 60% of the height. I've tried using "vw" and "vh" for setting the size, but it's still not displaying properly. I even experimented with setting it as a block element and adding content to try to make it show up, but no luck so far.

Any suggestions?

background-image: url("http://demo.zedtheme.com/prototype/boxed/images/example/parallax/home.jpg");
background-position: 50% -60px;
width: 100%;
height: 60%;

Check out my JSFiddle for reference - http://jsfiddle.net/7S7L2/

htmlcss

Answer №1

consider using the following code snippet:

html,body{
    height: 100%;
    width: 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

Using either Canvas.toBlob or Canvas.toDataURL results in me obtaining an image with a transparent

Hey there! I'm currently working on a project that requires the user to crop and upload images. For cropping, I am utilizing react-cropper. My challenge lies in dealing with Chrome's limitation on dataURL to 65529 pixels as mentioned in this M ...

javascripthtmlgoogle-chromecanvasdata-uri

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...

phpjavascriptjqueryhtmlpost

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

javascriptjqueryhtmlcss

The challenge of div placement was causing distress

FireFox 3.5 seems to have an issue where the following div does not push the page content down, instead it overlaps. However, in IE 8 this is not a problem. Can anyone suggest a quick solution? <div style="position:fixed;top:0;width:100%;">blah bl ...

htmlfirefoxxhtmlcss

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

cssreactjsnext.jscss-modulesframer-motion

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

cssanimation

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

Type Fury: A Multiplayer Gaming Hub for Speed Typists and Puzzle Solvers

Curious about creating a website that allows users to log in and participate in competitions against each other. Any tips on where to start or recommendations for existing frameworks would be greatly appreciated. Appreciate your help in advance! ...

phphtmlmultiplayer

Every time I click, the click event is getting attached repeatedly through the on method

Here is the HTML code that I am working with: <div class="connect"> <ul> <li><a href="#">Assign a Task</a></li> <li><a attr="viewCard" href="#">View Ca ...

javascriptjqueryhtml

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

jqueryhtmlcss

The issue of background-attachment: fixed not functioning properly on Safari

Currently, I have the following code implemented on an element that extends 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no- ...

csssafaricross-browserbackground-attachmentbackground-size

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

The issue I encountered with Angular's Mat-Select component is that the openedChange

When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to ...

htmlcssangularangular-material

The alignment of the DIV elements is not as I had hoped

I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div co ...

htmlcss

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

What is the best way to display database information on my webpage according to the selected item in the combo box?

Whenever I visit my sample.php page, the only thing that appears is my combo box. However, when I start selecting a value from the combo box, that's when the data from my database, which is fetched from getyear.php, is displayed. What I want to achie ...

javascriptjqueryajaxhtml

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

Currently I am working on creating a registration page in asp.net. I have been using panels to group the components such as labels, dropdown lists, and text boxes. However, when I run the page, I noticed that the positions of these components keep changing ...

javascriptasp.nethtmlcss

PHP Checkbox Form encountering Implode Errors

I'm a newcomer here and I did my best to search through the previous posts before reaching out, but unfortunately I couldn't find a solution that addressed my specific issue with my form. I'm still in the learning process, so I'm not en ...

phphtmlformscheckboximplode

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> https://i.sstatic.net/R3Yps.png located at the top center of the webpage, with ...

javascripthtmlcssaudio

Floating footers with centered content - they remain aligned in the center even when zoomed out

Behold my unique and straightforward footer design (100% zoom above, 70% zoom below) : To keep things simple, I aimed to center content with a single div having a fixed width and margin: 0 auto, all while maintaining the same color for the outer footer la ...

htmlcss