Dfyjkt

How do I get a website background image to be full width/stretch with no space at the side and top. I do not know whether it is html, css or javascript I have to use to do this.

click here for an example of what i would like

Here is my CSS code:

section
 
 max-width:100%;
	height:700px;
	background-size:cover;
 background-position:50% 50%;
 background-repeat: no-repeat;
 

There are lot of different way to do this, actually it's all depends upon developer.

this code might help you.

section 
 position: absolute;
 top: 0,
 left:0;
 bottom: 0;
 right: 0;
 height: 100%;
 background-repeat: no-repeat;
 background: #0e0e0e;
 display: flex;
 justify-content: center;
 align-items: center;


img 
 width: 50%;
 object-fit: contain;

<section><img src="https://i.stack.imgur.com/A2e0s.png" /></section>

html, body height: 100%; 

body 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(your-img-url);

This is it

Try this one

body 
 background-image: url(https://dummyimage.com/250/ffffff/000000);
 background-size: cover;
 

You can use HTML, CSS, or Javascript depending on your needs. Each programming language offers its own advantages and disadvantages:

HTML

Pros: The pure HTML way is the simplest, most straight forward way to insert an image. The HTML way is also the fastest and most beneficial to the page load speed because, since you are telling the browser the dimensions of the image in advance, the browser is able to present the page to the user sooner than when it gets done loading the image.

Cons: The pure HTML way is the least responsive, the least customizable, and the least extensible. You have to individually micromanage each and every image.

How: Follow the below steps.

1. Create an image tag.


2. (Optionally) set this image tag's decoding attribute to async to prevent the loading of the image from blocking the page load speed.


3. Set the width attribute to either a number of pixels or a percentage of the initial-containing surrounding box (a super advanced concept, please do not worry about it!).


4. Set the height attribute to either a number of pixels or a percentage of the initial-containing surrounding box (a super advanced concept, please do not worry about it!).


5. Set the alt and src attribute.

Working example:

48% X 48%:<br />
<img width="48%" height="48%" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />
<br />488px X 488px (original size, reccomended):<br />
<img width="488" height="488" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />
<br />48px X 48px:<br />
<img width="48" height="48" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />

CSS

Pro: Much more freedom and expressibility than the HTML way. With CSS, you can set constraints on the minimum and maximum size in addition to setting the prefered way. You can also scale your image based on font size so it looks good on all devices and scale it to the size of the screen and use calc to create complex calculations

Con: Suffers from the same lack of extensibility as HTML.

How:

html, body, #bloat 
 width: calc(22vh + 22vw + 1em + 8px);
 height: calc(48vh + 48vw - 2em - 1px);
 margin-left: 1em;
 transform: rotateX(-20deg) rotateY(-9deg) rotateZ(-2deg);
 perspective: 100vw;

<img src="https://i.pinimg.com/originals/d8/ba/c5/d8bac51eebcaea95eb6eeee1d6f01885.jpg" id="bloat" alt="What?"/>

Javascript

Pro: You can use the original size of the image in your calculations. This is a major plus because it allows for highly scalable web designs to be created.

Con: It is way way slower and page-blocking than HTML or CSS. This is especially true for people who do not know how to code Javascript, and are instead just copying snippets of javascript to paste all over their website because Javascript is unprecedentedly easy to misuse. However, do not be discouraged too much: in the right hands with the right usage, javascript can be incredibly powerful.

How: I am assuming that, because of the nature of the question you are asking, that you do not know javascript. Alright, I can work with that. The template HTML code is given below. The below code should be IE6+ compatible. However, it is quite likely that the rest of your page is not IE6-compatible.

delete eval; delete Proxy; // exorcise JS evil and redeem performance's soul!
(function() document.getElementsByTagName("img");
 var ddEle = document.documentElement;
 /*****************************/
 /** [Place Piece-1 Extensions Here] **/
 /*****************************/
 function whenResize()
 /*****************************/
 /** [Place Piece-2 Extensions Here] **/
 /*****************************/
 for (var i=0,Len=images.length; i < Len; ++i) 
 var theImage = images[i];
 /*****************************/
 /** [Place Piece-3 Extensions Here] **/
 /*****************************/
 theImage.width = /*Insert equation:*/ 1 + 1;
 theImage.height = /*Insert equation:*/ 1 * 1;
 
 
 if (document.readyState !== "interactive") 
 whenResize();
 else if (document.addEventListener) 
 document.addEventListener("DOMContentLoaded", whenResize, once: 1);
 else 
 document.attachEvent("onreadystatechange", function onReady()
 document.detachEvent("onreadystatechange", onReady);
 whenResize();
 );
 
 if (typeof addEventListener !== "undefined")
 addEventListener("resize", whenResize, passive: 1);
 else
 attachEvent("onresize", whenResize); // old IE
)();

The extensions are listed below. Please only use them "as-needed" to ensure maximum performance.

• Font Size extension
  
  
  • Gives you the user's font size as the variable deviceFontSize. Be aware that on some devices, the font size can change over the course of the user's visit to the page. But, unfortunately, there is no good solution that exists to deal with these devices. The easiest way to deal with this these devices (if you absolutely have to) is to swap the places of the following "Piece-2" code with "Piece-1" code.
  
  
  • Piece-1 code: var deviceFontSize = parseFloat((ddEle.currentStyle || getComputedStyle(ddEle, null)).fontSize);
    
  
  
  • Piece-2 code: [none]
  
  
  • Piece-3 code: [none]
  
  


• Window Size extension
  
  
  • Gives you the size of the user's screen as the variables deviceWidth and deviceFontSize
    
  
  
  • Piece-1 code: [none]
  
  
  • Piece-2 code: var deviceWidth=window.innerWidth, deviceHeight=window.innerHeight; if (deviceWidth === undefined) deviceWidth = ddEle.offsetWidth, deviceHeight = ddEle.offsetHeight;
    
  
  
  • Piece-3 code: [none]
  
  


• Natural Image Size
  
  
  • Every image file gets saved as being X pixels by Y pixels. This extension gets the dimensions of the original image file as variables naturalWidth and naturalHeight. It defaults to 0 if it could not get these values.
  
  
  • Piece-2 code: [none]
  
  
  • Piece-2 code: [none]
  
  
  • Piece-3 code: var naturalWidth = theImage.naturalWidth | 0, naturalHeight = theImage.naturalHeight | 0;
    
  
  


• Math Extension
  
  
  • See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
    
  
  
  • Now, to ensure speed, drop off the Math. from the math methods and insert the following code only once per each method used (not once per each usage of the method). For example, if you used Math.abs three times, then the piece-1 code would be var abs=Math.abs;. If you used Math.pow once and Math.log 4 times, then your piece-1 code would be var pow=Math.pow;var log=Math.log;. After you insert these extensions, you would use the math function normally without the Math.. For example, you might use Math.max along with the Window Size extension and set the width of the image to max(deviceWidth, deviceHeight) to get the maximum of the width and the height of the screen.
  
  
  • Piece-1 code: var (put the name of the math function here. E.x. put cos if you want Math.cos) = Math. (also put the name of math function here. E.x. put cos if you want Math.cos) ;
    
  
  
  • Piece-2 code: [none]
  
  
  • Piece-3 code: [none]
  
  

Example:

delete eval; delete Proxy; // exorcise JS evil and redeem performance's soul!
(function() getComputedStyle(ddEle, null)).fontSize);
 // Math functions:
 var max = Math.max;var min = Math.min;
 /*****************************/
 function whenResize()
 /*****************************/
 /** [Place Piece-2 Extensions Here] **/
 // the device width extension:
 var deviceWidth=window.innerWidth, deviceHeight=window.innerHeight; if (deviceWidth === undefined) deviceWidth = ddEle.offsetWidth, deviceHeight = ddEle.offsetHeight;
 /*****************************/
 for (var i=0,Len=images.length; i < Len; ++i) 0;
 /*****************************/
 theImage.width = (deviceWidth * 30/100 + 15*deviceFontSize + naturalWidth * 2) / min(max(naturalWidth, 1), 3);
 theImage.height = (deviceHeight * 210/100 - 3*deviceFontSize + naturalHeight * 2) / min(max(naturalHeight, 1), 3);
 
 
 if (document.readyState !== "loading") 
 whenResize();
 else if (document.addEventListener) 
 document.addEventListener("DOMContentLoaded", whenResize, once: 1);
 else 
 document.attachEvent("onreadystatechange", function onReady()
 document.detachEvent("onreadystatechange", onReady);
 whenResize();
 );
 
 if (typeof addEventListener !== "undefined")
 addEventListener("resize", whenResize, passive: 1);
 else
 attachEvent("onresize", whenResize); // old IE
)();

<img src="https://s1.nyt.com/timesmachine/pages/1/1993/10/20/766893_360W.png" alt="Medical Article In Foreign Language" />