Midpoint backdrop shading

Just diving into the world of web development, I've recently started coding for my personal website. With little to no knowledge of HTML or CSS syntax, I turned to online tutorials to guide me through creating a background gradient for my site. However, the gradient is not responding as expected - it stretches when the browser window is resized, rather than staying in proportion.

I'm seeking assistance with this issue. Here's the CSS code snippet I've put together so far:

 html {
    height: 100%;
    background: #499bea;
}

body
{
    float:left;
    position:relative;
    height: 100%;
    width: 100%;
    background-position: 0px 0px;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#00438a', GradientType=1 );

}

Answer №1

To enhance the appearance, consider adjusting the height and changing the background-size to cover along with a few other modifications:

 html {
    height: 100%;
    background-color: #499bea;
}

body {
    float: left;
    position: relative;
    /* Eliminated height */
    width: 100%;
    margin: 0;
    background: no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background: #499bea;
    background: -moz-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #499bea), color-stop(100%, #00438a));
    background: -webkit-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -o-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: -ms-radial-gradient(center, ellipse cover, #499bea 0%, #00438a 100%);
    background: radial-gradient(ellipse at center, #499bea 0%, #00438a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#499bea', endColorstr='#00438a', GradientType=1);

}

.container { height: 900px; }

Check out the updated design on JSFiddle: http://jsfiddle.net/LJY9y/

Answer №2

To avoid stretching, opt for using circle in place of ellipse:

background: radial-gradient(circle at center, #499bea 0%, #00438a 100%);

See Demo

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

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

Is it possible to modify a website's CSS permanently using just the browser?

Is there a way to make changes to CSS in a large project using Firefox's built-in developer tools and have them saved permanently? I've been trying to edit the style sheets, but couldn't locate the specific property I needed. Since I can&apo ...

Using javascript code to encode images to base64 and save the output to a text file

How can I modify the code below: <p id="demo"></p> <script> var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function(){ var dataURL = read ...

When it comes to for loops, one important aspect to consider is the value of each

Looking to include the "selected" attribute in the select field of my Django project: <form id="formselect" method="post"> {% csrf_token %} <select name="position_select" id="position_select"> <option value="0">all positions& ...

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: https://i.sstatic.net/f5vcn.png My goal is to keep the first two links in their original position an ...

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

Leveraging JavaScript for pricing calculations within asp.net framework

I am currently working with a textbox in a gridview and trying to calculate values using JavaScript. My code seems to be error-free. The goal is to multiply the quantity by the rate to get the total price. function totalise(price, rate, qt) { var qt ...

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Currently, my code is utilizing the name attribute to verify whether the user has entered information in a specific field and validating the input. However, I am facing an issue where the submit button remains active even if there are empty fields presen ...

css table cells with overflow

I need help with a table where I have text in one of the td cells that goes beyond the right border and wraps to the next line. What I want is for the overflowing text to be hidden when it reaches the border, showing only the last 3 visible characters repl ...

Can you explain the significance of the symbol "<<<HTML"?

During my code reading, I came across the symbol <<<H.TML. My colleagues mentioned that it is often used to embed HTML within a PHP file. I attempted to gather more information on its usage but could not find much. Could someone please explain ho ...

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

Leveraging the power of beautifulsoup and selenium for web scraping on a multi-page site results in gathering a

I am in the process of scraping text from a website iteratively. Each page on this particular website follows the same html structure. I utilize selenium to go to the next page each time I add the following strings: text_i_want1, text_i_wantA, text_i_wantB ...

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

I'm having trouble with my inline list breaking when I try to add something to it. How can I fix this

I'm experiencing an issue where moving my mouse over any of the li's causes them to go out of place. How can I resolve this issue? Here is a demo: https://jsfiddle.net/z970pg6n/ ul { list-style: none; display: block; padding: 0; margi ...

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: https://i.sstatic.net/WiBXH.jpg Initially, everything ...

What could be causing the leftward movement of my hovering image?

I'm seeking a solution for my image overlay text shifting issue. Currently, when I hover my mouse over the image, the overlaid text moves to the left by 69 pixels instead of staying directly above the image. How can I rectify this problem? https://i. ...

The Ajax request was a success, but I am unable to retrieve radio button values from the $_POST variable

My website operates fully asynchronously, generating and destroying HTML elements on button clicks that prevent navigation. In this section, I am creating a form with an array of radio boxes for rating from 1 to 10. This form is submitted using jQuery.aja ...

stop an html page from opening a new window

When using my HTML-based application, there are instances when it needs to open another URL within an iframe. However, a problem arises when the third-party URL within the iframe also opens a new window with the same content and URL. How can I prevent th ...

Joomla site displaying blank white screen when refreshing on default Android browser

While creating a new website using Joomla, I encountered an unusual issue. On any Android device using the default browser (Chrome), if I refresh any page on the website, it will display a white screen. It's important to note that this only occurs du ...

The webpage's source code does not display any HTML elements related to Prismic slices

I'm currently using a combination of Prismic and Next.js to build a website and everything is running smoothly. However, when I started optimizing the SEO, I noticed that the page source does not contain the HTML for any Prismic slice, nor does it inc ...