简体   繁体   English

背景图片:不会以白色继续显示

[英]Background image: Does not continue in white color

First off, my website is: http://www.volunteeringnews.com 首先,我的网站是: http : //www.volunteeringnews.com

On the website I want white to continue to the bottom of the website but he is now cutting it just after the background image. 在网站上,我希望白色继续显示在网站底部,但他现在正将其剪切在背景图像之后。

I could offcourse make my img 10000 px high but that seems to create a very big image in size. 我可以偏离路线将img像素提高到10000像素,但这似乎会产生很大的图像。

So far I tried creating a new Div to go around the background divs but then he just goes over the background divs. 到目前为止,我尝试创建一个新的Div来绕过背景div,但随后他只遍历了背景div。

I tried z-index but that did nothing. 我尝试了z-index,但没有执行任何操作。

I tried to use the IMG from HTML and not CSS but that got my img out of line. 我试图从HTML而不是CSS使用IMG,但这使我的img显得格格不入。 (I have the background split in two images for the top and the main section). (我将背景分为两部分,分别是顶部和主要部分)。

I've been on it all day and hoped that someone might be able to help me out. 我整天都在努力,希望有人可以帮助我。

ps.I'm sorry if this is kind of a noob question but I am only on building websites for a few months. ps。很抱歉,如果这是一个菜鸟问题,但我只在建设网站上呆了几个月。

Thank you! 谢谢!

#head{
margin:0px;
height:215px;
background-image:url(../img/background/background_01.gif);
background-repeat:no-repeat;
width:100%;


}

#mainc {


margin-top: 0px;
width:90%;
position:absolute;
background-image:url(../img/background/background_02.gif);
background-repeat:no-repeat;
min-height:100%;

add

background-color:#fff; 

to your #mainc and #head as well ;) 到你的#mainc#head ;)

just by adding 只需添加

background-color: #FFFFFF;

to your #mainc style should do the trick 您的#mainc风格应该可以解决问题

First off start by cleaning up your html which currently looks like this: 首先,首先要清理您的html(当前看起来像这样):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering News- All your volunteering news plus a database to look for your own advernture. - Cheap and free</title>
<link href="css/styles.css" rel="stylesheet">
<link href="wordpress\wp-content\themes\twentytwelve\style.css" rel="stylesheet">

<meta name="Volunteering" content="width=device-width, initial-scale=1.0">

</head>

<!--body-->

    <body>
<div class="topnav"></div>
<header><!doctype html>
<html lang="en">        
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">

<meta name="Volunteering" content="width=device-width, initial-scale=1.0">

<div class ="sql">
</div>

</head>



<body>

<div id="wrapper">
             <img src="img/form/background.jpg" class="stretch" alt="" />
</div> 

    <div id="head">

        <div class="logo">
            <img src="img/head/logo.png">
        </div>




        <div class="menu-top">
            <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">

<meta name="Volunteering" content="width=device-width, initial-scale=1.0">

</head> 

<body>
<div id="navigation">
<ul id="nav" class="drop">

  <li><a href="home.php">Home</a></li>

You have multiple doctypes, multiple html tags, multiple head tags, multiple css declarations. 您有多个doctype,多个html标签,多个head标签,多个css声明。 This will never work properly. 这将永远无法正常工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM