Sorry for being a noob.
I tried searching but ended up with no results.
I want to know how to add a background border design behind the website? Like in the below image?
I can see how to just add a image as a background, but how to add that black design as a background as an non-movable image.
Like in this site, www.creepypasta.com
Again, sorry for being such a noob.
I am trying to build a page that has a paragraph of text with 4 images in a quad that are directly to the right of it. The problem is I've previously tried using floats, but as expected, this did not work and so far I have this... http://ift.tt/1zlq1YS
The code:
#panel1 {
padding: 5%;
width: 100%;
background-color: #16818a;
}
#intro-text {
background-color: #16818a;
width: 50%;
}
div#quad {
background-color: #111; font-size: 0;
width: 50%; margin: 0 auto;
}
div#quad figure {
margin: 0; width: 50%; height: auto;
transition: 1s; display: inline-block;
position: relative;
}
div#quad figure img {
width: 100%;
height: auto;
}
div#quad figure:nth-child(1) {
transform-origin: top left;
}
div#quad figure:nth-child(2) {
transform-origin: top right;
}
div#quad figure:nth-child(3) {
transform-origin: bottom left;
}
div#quad figure:nth-child(4) {
transform-origin: bottom right;
}
.expanded {
transform: scale(2);
z-index: 5;
}
div.full figure:not(.expanded) {
pointer-events: none;
}
div#quad figure:hover {
cursor: pointer;
z-index: 4;
}
<section id="panel1">
<div id='intro-text'>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>
</div>
<div id="quad">
<figure>
<img src="http://ift.tt/1wukO6z" alt="courses" width="1000" height="700" class="alignnone size-full wp-image-31" />
</figure>
<figure>
<img src="http://ift.tt/1zlq0ny" alt="rental" width="1000" height="700" class="alignnone size-full wp-image-32" />
</figure>
<figure>
<img src="http://ift.tt/1wukQeA" alt="tour" width="1000" height="700" class="alignnone size-full wp-image-33" />
</figure>
<figure>
<img src="http://ift.tt/1zlq0nC" alt="where" width="2592" height="1944" class="alignnone size-full wp-image-34" />
</figure>
</div>
</section>
Any help would be appreciated, cheers!
I found this code on StackOverflow. & This code works great for converting a website to image. However, instead of navigating to a new URL, can this code be modified to capture the current website?
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Threading;
using System.Windows.Forms;
public class WebsiteToImage
{
private Bitmap m_Bitmap;
private string m_Url;
private string m_FileName = string.Empty;
public WebsiteToImage(string url)
{
// Without file
m_Url = url;
}
public WebsiteToImage(string url, string fileName)
{
// With file
m_Url = url;
m_FileName = fileName;
}
public Bitmap Generate()
{
// Thread
var m_thread = new Thread(_Generate);
m_thread.SetApartmentState(ApartmentState.STA);
m_thread.Start();
m_thread.Join();
return m_Bitmap;
}
private void _Generate()
{
var browser = new WebBrowser { ScrollBarsEnabled = false };
browser.Navigate(m_Url);
browser.DocumentCompleted += WebBrowser_DocumentCompleted;
while (browser.ReadyState != WebBrowserReadyState.Complete)
{
Application.DoEvents();
}
browser.Dispose();
}
private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
// Capture
var browser = (WebBrowser)sender;
browser.ClientSize = new Size(browser.Document.Body.ScrollRectangle.Width, browser.Document.Body.ScrollRectangle.Bottom);
browser.ScrollBarsEnabled = false;
m_Bitmap = new Bitmap(browser.Document.Body.ScrollRectangle.Width, browser.Document.Body.ScrollRectangle.Bottom);
browser.BringToFront();
browser.DrawToBitmap(m_Bitmap, browser.Bounds);
// Save as file?
if (m_FileName.Length > 0)
{
// Save
m_Bitmap.SaveJPG100(m_FileName);
}
}
}
public static class BitmapExtensions
{
public static void SaveJPG100(this Bitmap bmp, string filename)
{
var encoderParameters = new EncoderParameters(1);
encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
bmp.Save(filename, GetEncoder(ImageFormat.Jpeg), encoderParameters);
}
public static void SaveJPG100(this Bitmap bmp, Stream stream)
{
var encoderParameters = new EncoderParameters(1);
encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
bmp.Save(stream, GetEncoder(ImageFormat.Jpeg), encoderParameters);
}
public static ImageCodecInfo GetEncoder(ImageFormat format)
{
var codecs = ImageCodecInfo.GetImageDecoders();
foreach (var codec in codecs)
{
if (codec.FormatID == format.Guid)
{
return codec;
}
}
// Return
return null;
}
}
I'm working in visual studio with the following code, however, the URL images refuse to center in the columns like the h2 tags did. ive tried multiple options such as
background-image: url('http://ift.tt/1AQYkuF');
background-position: center center;
background-repeat: no-repeat;
also
background: url('http://ift.tt/1AQYkuF') center center;
background-repeat: no-repeat;
here is the full section of code:
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
@*EDIT________________BUTTON1 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*@
<style type="text/css">
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://ift.tt/1vFE00g');
background-repeat: no-repeat;
}
.urlImg1:hover {
background-image: url('http://ift.tt/1AQYimw');
}
</style>
<a href="http://ift.tt/Njz38V" class="urlImg1" title="Corelangs link"></a>
@*END BUTTON#1_____________________________________*@
</div>
<div class="col-md-4">
<h2 style="text-align: center;">Version 2.0</h2>
@*EDIT________________BUTTON2 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*@
<style type="text/css">
.urlImg2 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://ift.tt/1AQYkuF');
background-repeat: no-repeat;
}
.urlImg2:hover {
background-image: url('http://ift.tt/1AQYimz');
}
</style>
<a href="http://ift.tt/Njz38V" class="urlImg2" title="Corelangs link"></a>
@*END BUTTON#2_____________________________________*@
</div>
I currently have a homepage for my website containing 4 circular images that double as buttons.
My Question: I am trying to code (using html and css) so that when i hover on these images, the picture in the circular button fades to a dark grey and a small button appears instead in the center of the circular image. When this button is clicked it will direct you elsewhere, rather than using the entire image as a button.
Simplified: When i hover over an image, i would like the image to fade to a dark grey and a small button appear in the middle of the image. Thanks
Below is code i have for an example image and the text displayed above it, however i do not know how to darken the image and make a button appear.
<a href = "https://twitter.com/"> <button id = "ButtonMyCV"></button> </a>
<a href = "https://twitter.com/"> <p class = "TextMyCV"> My CV </p> </a>
#ButtonMyCV
{
background-image:url("http://ift.tt/1Dh3GOo");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: white solid 5px;
height: 300px;
width: 300px;
margin-left: 40px;
margin-top: 220px;
position: fixed;
}
.TextMyCV
{
position: fixed;
margin-left: 135px;
margin-top: 175px;
color: white;
font-size: 35px;
}
.TextMyCV:hover
{
text-decoration: underline;
}
#ButtonMyCV:hover
{
}
I want to store an image(which is passed by an android developer) into mysql database. I'm working in PHP. Plz help me someone to script php code
i have a problem with the banner in the foreground.
I have uploaded this:
The Playstore says this: "You must correct the banner in the foreground. Is not a valid image." Can you help me?
We have done it in PNG, JPEG with size 1024 x 500
I don't know where is the problem! :(
