I can not place background image with CSS, background-image, does not recognize it [duplicated]

Question

I can not place background image with CSS, background-image, does not recognize it [duplicated]

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

input:focus{
    	background-color: #58ACFA;
    	color: #000000;
    	font-weight: bold;
    }
    
    body {    	
        background-size: 100vw 100vh;
        font-family: arial;
        background-image: url("img/sea.jpeg");
        background-attachment: fixed;
        margin:0;  
    }
    
    form {
    	width: 400px;
    	margin:auto;
    	padding: 10px 20px;
    	background: rgba(0,0,0,0.4);
    	box-sizing: border-box;
    	border-radius: 7px;
    }

<link rel="stylesheet" type="text/css" href="css/styles.css">
         
       </head>
       <body>
          <header>
             
            
          </header>
           
          <form action="">
              <h1> Registration Form </h1>
             <p> The required fields are with * </p>
             <fieldset>
               <legend>  Contact information </legend> 
             <label for="firstName">FirstName (*) </label><input type="text" id="firstName" required minlength="3" maxlength="40" >
             
             <label for="lastName">LastName (*)  </label><input type="text" id="lastName" required minlength="3" maxlength="40" >
            
             <label for="email">Email (*) </label><input type="email" id="email" size="25" maxlength="100" required  pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}">
             </fieldset>
             <br>
    
             <fieldset>
                <legend> Registration information</legend>
    
             <div>
                <label for="bday">Birthday</label>
                <input type="date" id="bday"  >
             </div>
       <fieldset>
            <legend>Sports practice? </legend>
            <label>
                <input type="radio" name="yes" value="yes"> Yes</label>
            <label>
                <input type="radio" name="no" value="no"> No </label>
            <label>
                <input type="radio" name="sometimes" value="sometimes"> Sometimes</label>
        </fieldset>

css imagen

asked by Paola 07.09.2018 в 13:31

source

3 answers

Replace values of one table in relation to another? Change img in responsive wordpress

score 1 · Answer 1

I've done tests with your code and apparently the problem you have is with the image. Check if you are putting the route correctly by loading it from background-image .

Changing the image, in your code, if it was shown as background in body .

score 0 · Answer 2

try putting the background directly in the body, that is, your html file like this:

 <body style=" background-image: url("img/sea.jpeg");">

if this works and you are using localhost, refresh the page by cleaning the ctrl + f5 dash to see if the browser cache is interrupting something, it is not a code solution but it is an alternative.

now if it does not work verify that the route is ok because that would be enough

score 0 · Answer 3

I have changed the path of your image to an online one and it works, so it is most likely a url or transcription problem.

Demo with the change only in the url of the image:

input:focus{
    	background-color: #58ACFA;
    	color: #000000;
    	font-weight: bold;
    }
    
    body {    	
        background-size: 100vw 100vh;
        font-family: arial;
        background-image: url("http://picsum.photos/1400/850?image=949");
        background-attachment: fixed;
        margin:0;  
    }
    
    form {
    	width: 400px;
    	margin:auto;
    	padding: 10px 20px;
    	background: rgba(0,0,0,0.4);
    	box-sizing: border-box;
    	border-radius: 7px;
    }

<link rel="stylesheet" type="text/css" href="css/styles.css">
         
       </head>
       <body>
          <header>
             
            
          </header>
           
          <form action="">
              <h1> Registration Form </h1>
             <p> The required fields are with * </p>
             <fieldset>
               <legend>  Contact information </legend> 
             <label for="firstName">FirstName (*) </label><input type="text" id="firstName" required minlength="3" maxlength="40" >
             
             <label for="lastName">LastName (*)  </label><input type="text" id="lastName" required minlength="3" maxlength="40" >
            
             <label for="email">Email (*) </label><input type="email" id="email" size="25" maxlength="100" required  pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}">
             </fieldset>
             <br>
    
             <fieldset>
                <legend> Registration information</legend>
    
             <div>
                <label for="bday">Birthday</label>
                <input type="date" id="bday"  >
             </div>
       <fieldset>
            <legend>Sports practice? </legend>
            <label>
                <input type="radio" name="yes" value="yes"> Yes</label>
            <label>
                <input type="radio" name="no" value="no"> No </label>
            <label>
                <input type="radio" name="sometimes" value="sometimes"> Sometimes</label>
        </fieldset>