Home/ Questions/Q 8024431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:52:14+00:00

I have created a css gradient.Am trying to place a image above that.Below is

  • 0

I have created a css gradient.Am trying to place a image above that.Below is my code.

style.css
.body {
   margin:0;
   padding:0;
   height:70%;
   border-style:dotted solid;
   border-color:#38FFBE;
}
.container {
   height:90%;
   position:relative;
}
.header {
   padding:10px;
   height:40%;
   border-style:dotted solid;
   border-color:#38FFBE;
   background-image: linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%);
   background-image: -o-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%);
   background-image: -moz-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%);
   background-image: -webkit-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%);
   background-image: -ms-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(0.41, rgb(95,255,41)),
    color-stop(0.71, rgb(156,255,255)),
    color-stop(0.86, rgb(232,171,235))
);

background: url(apples.jpg) no-repeat left bottom, -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7) ;
background: url(apples.jpg) no-repeat left bottom, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
.body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
   background-color:#CAFF70;
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:80px;   /* Height of the footer */
   background:#CAFF70;
}

home.jsp

<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>
<head>
<title>MindBest</title>
</head>
<style type="text/css">
<%@include file="../include/style.css"%>
</style>
<body>
<div class="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

I have tried the above code.but the gradient is totally changed.can anyone please help me to align the image to left side of gradient.As am new to css.Can anyone help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is this what you’re trying to achieve? http://jsfiddle.net/PhilippeVay/VPjP9/

    I added an image to the first serie of gradients (I deleted those that were along apple.jpg, couldn’t understand what they were doing there) with the property background-image and then wrote background-position and background-repeat for these multiple images (image and gradient).

    As there are numerous vendor prefixes to manage, it’s easier to just write what is needed for the background-image part and then write once for all browsers background-position and background-repeat that doesn’t need any vendor prefix.

    • 0