Why does my background image get deleted when anything else is written in the "body" section?


#1


In my css layout, I added a background image which worked but if I try to change any properties regarding it or even write anything in the body section, it disappear from my web page. Thank you!


CSS layout

body {
	background-image:url("../img/indian_herbs&spices.jpeg.jpeg")
	  
}

HTML  in case anyone needs this

</head>
<body> 

	


	<!-- page content goes inside the container -->
	<div class="container">

		 <h1> Chicken Biryani Recipe </h1>


		 <img src="img/chicken_biryani.jpeg.jpeg" alt="Chicken Biryani">

		<p> 

		<i> Chicken Biryani </i> is a popular Indian dish made with chicken and fragrant Basmati rice that is cooked with an exotic blend of herbs and spices. The chicken is first cooked, and when the rice is partially done, the chicken is added to infuse the rice with the flavors as it finishes cooking. The results are worth the multistep process! This dish is traditionally cooked with bone-in chicken pieces to allow the flavor to be enchanced by the bones, but I actually enjoy biryani with boneless pieces of chicken. I've included the quick steps to make my mother-in-law's simple recipe for <i> biryani masala </i> - the blend of ground roasted spices used to flavor this dish. This hearty and flavorful rice dish is served as a main dish with Three Vegetable Raita drizzled on top or served in a small bowl on the side. 
		
		</p>

	</div><!-- end container -->

	<div class="container">

		<h3 style="font-weight: normal";> Information </h4>

		<ul>

		<li> Serves 4
		<li> Prep time: 15 minutes
		<li> Cook time: 35 minutes + 5 minutes to rest
		<li> Refridgerator life: 3 days
		<li> Freezer lize: 1 month
		<li> Reheating method: Place the refrigerated or defrosted rice in a microwave,  sprinkle a few drops of water on it and stir periodically. Or place the rice in a saucepan, sprinkle a few drops of water on it and warm over medium-low heat, stirring periodically.
		
		</li>
		</ul>

		<h3> Biryani Chicken </h3>

		<ul>

		<li> 2 teaspoons Biryani Masala (recipe follows)
		<li> 2 tablespoons unsalted butter
		<li> 1 1/2 teaspoons minced garlic
		<li> 1 1/2 teaspoons peeled and finely grated fresh ginger
		<li> 1 small onion, thinly sliced into half moons
		<li> 2 bay leaves
		<li> 1 fresh finger-length green chili pepper, cut in half lengthwise
		<li> 1 lb (500 g) boneless, skinless chicken breast, rinsed and cut into 1-in (2.5-cm) pieces
		<li> 1/4 teaspoon ground tumeric
		<li> 1 teaspoon ground red pepper (cayenne)
		<li> 1 teaspoon salt
		<li> 2 tablespoons store-bought or Homemade Plain Yogurt
		<li> Juice of 1/2 lime
	    <li> 1 handful fresh coriander leaves (cilantro) 
		(about 1/2 cup/10 g packed leaves) rinsed and chopped

		</li>
		</ul>

		<div style="clear: both>">

			<h3> Biryani Masala </h3> 
			<h4 style="font-weight: normal"> (makes 4 teaspoons) </h4>

		</div>
			
		
		<ul>

		<li> 1 teaspoon whole cloves
		<li> 10 whole green cardamoms
		<li> 1 teaspoon fennel seeds
		<li> 1 teaspoon coriander seeds
		<li> One 1/4-in (6-mm) piece cinnamon stick
		
		</li>
		</ul>

		<h3> Aromatic Rice </h3>

		<ul>

		<li> 1 cup (180g) uncoooked, white Basmati rice
		<li> 3 tablespoons vegetable oil
		<li> 1/2 small onion, thinly sliced into half moons
		<li> 1 handful fresh mint leaves (about 1/4 cup / 5 g packed leaves), rinsed and chopped
		<li> 2 cups (500 ml) water
		<li> 1/2 teaspoon salt

		</li>
		</ul>

		<ol>

		<li style=" padding-top: 0.5em"> To make the Biryani Masala: Place a small skillet over medium heat. When the skillet is heated, roast all the spices until they are fragant, stirring frequently, about 1 minutes. Immediately remove the spices from the skillet and place in a small bowl. Let cool a bit before grinding. 
		<li style=" padding-top: 0.5em"> Grind the roasted spices to a fine powder in a coffee/spice grinder. The yield is enough for two Chiken Biryani dishes. Set 2 teaspoons of the  of the ground spices aside for use now and place the remaining ground spices in an airtight container, where it can be stored at room temperature up to 3 months.
		<li style=" padding-top: 0.5em"> To make the Biryani Chicken: Melt the butter in a medium saucepan over medium heat. Add the garlic, giner, onion, bay leaves, and green chili pepper. Saute until the onion is translucent, stirring frequently, about 3 minutes. Add the chicken, turmeric, red pepper, salt, 2 teaspoons of the Biryani Masala, yogurt, lime juice, and coriander leaves. Stir to combine. Cover the saucepan and cook for 10 minutes, stirring occasionally. Remove the cover and cook until the chicken is opaque and any liquid is cooked off, stirring occasionally, about 5 minutes. Remove from the heat.
		<li style=" padding-top: 0.5em"> To make the Aromatic Rice: Place the rice ein a small bowl. Rinse three or four times by repeatedly filling the bowl with cold water and carefully draining off the water. It is okay if the water is not completely clear, but try to get it as clear as you can. Pour the rice into a sieve to drain.
		<li style=" padding-top: 0.5em"> Pour the oil into a large saucepan and place over medium heat. When the oil is heated, add the onion and mint leaves. Saute until the onion is translucent, stirring frequently, about 3 minutes. Add the rice and stir thoroughly until all the rice is coated with the oil. Add the water and salt. Stir to combine. Bring to a rolloing boild over high heat.
		<li style=" padding-top: 0.5em"> Stir and reduce the heat to medium-low. Partially cover the saucepan. Simmer undisturbed until the rice is half-cooked and there is a thin layer of water on top of the rice, about 3 minutes.
		<li style=" padding-top: 0.5em"> Add the Biryani Chicken to the rice. Gently stir to combine. Paritally cover the saucepan. Simmer undisturbed until the water is completely absorbed, about 5 minute. Turn off the heat. Let rest, fully covered, for 5 minutes on the warm stove. Keep covered until ready to serve or let cool to room temperature and refrigerate or freeze for later. Before serving, gently fluff the rice with a fork to mix the chicken.
		




	</div>
	

	<!-- Load scripts -->
	<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.3.min.js"><\/script>')</script>
	<script src="js/main.js"></script>

</body>
</html>


#2

What other styles do you want to include to your background image? Or can you be more specific as to what properties you'd like to change?


#3

I wanted to make it so it does not repeat and could cover the full screen. The real issue I have is the white space, so I added the background. The problem with the background image is that it repeats multiple times which makes the page look pretty ugly. I am not very familiar with HTML and CSS so I'm not sure of all properties I could change to mediate this. But I was thinking of doing something like this maybe:

 background-repeat: no-repeat;
 background-attachment: fixed;

As I said though, even if I added anything into the body section in my css the background disappears..


#4

You need a semi-colon at the end of you background img url in your CSS.

body {
    background-image:url("../img/indian_herbs&spices.jpeg.jpeg") /* Add ; here */
    /* Other styles */
	  
}

Please also check that you are properly closing your tags. Funny stuff happens if you don't:

<h3 style="font-weight: normal";> Information </h4><!-- Close properly-->

<ul>

		<li> Serves 4 <!-- add </li> to ALL <li>s-->
		<li> Prep time: 15 minutes
		<li> Cook time: 35 minutes + 5 minutes to rest
		<li> Refridgerator life: 3 days
		<li> Freezer lize: 1 month
		<li> Reheating method: Place the refrigerated or defrosted rice in a microwave,  sprinkle a few drops of water on it and stir periodically. Or place the rice in a saucepan, sprinkle a few drops of water on it and warm over medium-low heat, stirring periodically.
		
		</li>
		</ul>

If you're interested in making your code neat, I suggest to indent your lists like this:

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

#5

Haha wow. Thanks for your help. I have noticed a lot of such simple mistakes that just ruin my coding. This apparently was one of them. Thanks for everything. Sorry to waste your time on such an easy fix.


#6

It's ok! It's difficult to see those small mistakes hence a fresh pair of eyes is always helpful. This didn't waste my time. I dedicated time to help and it was my choice to do so.

You're welcome! Have a great day :slight_smile:


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.