Instructions on how to make the image within this div expand to full screen in order to cover up the blue background color

I created a div and set its background image, but the image is not covering the full screen. There's some space around it. The blue color is the body color.

Please refer to the image here

I am very new to web development, so please forgive my silly mistakes

#one{
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10% , rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 75%), url("https://picsum.photos/500");
    padding-top: 168px;
    padding-bottom: 100px;
    color: white;
    border: none;
    background-size: cover;
}
<div id="one">
        <center>
        <p id="p1">Unlimited movies, TV <br>shows and more.</p>
        <p id="p2">Watch anywhere. Cancel anytime.</p>
        <p id="p3">Ready to watch? Enter your email to create or restart your membership.</p>
         
         <input id="mail" type="text" >
         <input id="mailb" type="submit" value="Get Started">
        </center>
    </div>

htmlcss

Answer №1

Include this line in your CSS stylesheet

body {
    margin: 0;
}

This step is necessary because browsers automatically add a small margin, which needs to be manually set to zero.

body {
  margin: 0;
}

#one {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 75%), url("https://picsum.photos/500");
  padding-top: 168px;
  padding-bottom: 100px;
  color: white;
  border: none;
  background-size: cover;
}
<div id="one">
  <center>
    <p id="p1">Unlimited movies, TV <br>shows and more.</p>
    <p id="p2">Watch anywhere. Cancel anytime.</p>
    <p id="p3">Ready to watch? Enter your email to create or restart your membership.</p>

    <input id="mail" type="text">
    <input id="mailb" type="submit" value="Get Started">
  </center>
</div>

https://i.sstatic.net/aDm84.jpg

Answer №2

To eliminate the default margin in the body, set the padding and margin to 0 in your CSS code.

body {
    padding: 0;
    margin: 0;
}

If you want to center a background image, include these two lines of code in your #one style:

background-position: center;
background-repeat: no-repeat;

I trust that my response has been beneficial to you.

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

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

javascriptjqueryhtmlsiblings

I would appreciate your assistance with the hide button

Is there a way to hide a button after clicking on it? I would greatly appreciate your help! ...

javascripthtml

Guide to positioning an image at the center across 2 columns using Bootstrap

Looking to create a split screen Bootstrap 4 layout with an image in the center overlapping the two columns. Have successfully set up two equal columns but struggling to position the image to overlap. Have experimented with position:absolute and float:lef ...

htmltwitter-bootstrapcssbootstrap-4

Tips for incorporating JSON data into an HTML table

https://i.sstatic.net/WEdge.jpgIn an attempt to showcase JSON data in an HTML table, I want the schoolClassName value to be displayed as a header (th) and the first names of students belonging to that specific schoolClass to appear in a column beneath the ...

javascripthtmlarraysjsonreactjs

Deactivate toggle effect by clicking on a different link

My existing JavaScript code changes the background color of a link when it is clicked: $(".button").click(function(){ $(this).css('background-color', '#555'); }); While this functionality works, I am looking to have the color tog ...

javascriptjqueryhtmlcsstoggle

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

Are my Angular CLI animations not working due to a version compatibility issue?

I've been working on a project that had Angular set up when I started. However, the animations are not functioning correctly. The mat input placeholder doesn't disappear when typing, and the mat-select drop-down is not working. Here is my packag ...

htmlcssangulartypescriptanimation

When utilizing scoped slots in BootstrapVue, you may encounter an error stating "Property or method 'data' is not defined."

Greetings! I am currently in the process of learning how to utilize BootstrapVue, and I decided to reference an example from the official BootstrapVue documentation. <template> <div> <b-table :fields="fields" :items="items" foot-clone ...

htmlvue.jsvue-componentbootstrap-vue

Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...

cssimagesvg

Is it possible to filter JavaScript Array while ensuring that select options do not contain duplicate IDs?

I am utilizing two datatables with drag and drop functionality. Each row in the datatables contains IDs. When I drag a row from table 1 to table 2, the data is stored in an Array. I have an addArray function that pushes the IDs into the Array, filters out ...

javascripthtmljquerybootstrap-4

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

javascripthtmljqueryajax

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Is it possible to use Bootstrap to display grid columns or rows within a Carousel instead of carousel-items? The concept involves having intricate grid column structures that rotate like carousel-items. For instance, if we have the following grid: <div ...

csstwitter-bootstrapbootstrap-4

Customizing the scrollbar within a modal using reactjs-popup

I am currently working on a CustomPopup functional component that includes a reactjs-popup: function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested> {item === "howto ...

cssreactjsgoogle-chromestylesscrollbar

Using Vue.js to alter the CSS class property

I am exploring Vue.js and looking to modify a CSS class property. Here is the HTML code utilizing the specified class: <div class="customTimer"></div> Here is the corresponding CSS code: .customTimer { width: 100%; height: 1 ...

javascripthtmlcssvue.jsvuejs2

Using the device's width and height with material-ui

Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...

cssreactjsiphonematerial-ui

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Is it possible to nest a parsys within another parsys in this context?

On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...

javahtmlcsscontent-management-systemaem

Using a background image in the navigation menu with CSS

Looking to create a horizontal menu with a responsive background image. Struggling with the issue of the 'ul' menu being misaligned with the background image when in full-screen mode. Attempted to use separate 'div' containers for the ...

htmlcssimagemenubackground

What is the process to replace the image in these templates?

I recently downloaded a template from the internet and am in the process of developing a website. Can someone please guide me on how to change the icons highlighted in the black and red boxes as shown in the image? I am using Visual Studio and ASP.NET fo ...

jquerycssasp.net