CHANGE BACKGROUND PHOTO WITH FORM

Developer
Vedat Sözen
Size
2,389 Kb
Views
12,144
  1. CHANGE BACKGROUND PHOTO WITH FORM Previews
  2. CHANGE BACKGROUND PHOTO WITH FORM HTML Codes
  3. CHANGE BACKGROUND PHOTO WITH FORM CSS Codes
  4. CHANGE BACKGROUND PHOTO WITH FORM JS Codes

How do I make an change background photo with form?

I wrote a jquery code to change background photo by using val() method .. You can write any photo link in internet to make it background photo of page ... What is a change background photo with form? How do you make a change background photo with form? This script and codes were developed by Vedat Sözen on 27 November 2022, Sunday.

CHANGE BACKGROUND PHOTO WITH FORM Previews
IQ Test

CHANGE BACKGROUND PHOTO WITH FORM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CHANGE BACKGROUND PHOTO WITH FORM</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="https://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script src="stil.js"></script>
</head>
<body>
<div id="container">
<div id="menu">
<input type="text"><button>WRITE BACKGROUND IMAGE URL AND CLICK</button>
</div>
<div id="slogan">ENTER YOUR IMAGE URL TO SEE IT AS BACKGROUND IMAGE</div>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

CHANGE BACKGROUND PHOTO WITH FORM - Script Codes CSS Codes

body {
background-image:url("https://unsplash.imgix.net/reserve/NxxLccbqQdGtNc7xJ43e_ancestral-home.jpg?q=75&fm=jpg&w=1080&fit=max&s=e132fbaa848cff62e31800dc1b3056be");
background-size:100%;
background-attachment:fixed;
box-sizing:border-box;
}
#container {
margin:auto;
height:500px;
width:100%;
box-sizing:border-box;
}
#menu {
margin:auto;
height:50px;
width:1000px;
text-align:center;
line-height:50px;
}
#menu ul { list-style:none;}
#menu ul li {
display:inline;
font-family:Cuprum;
margin-right:10px;
font-size:20px;
color:black;
padding:10px;
letter-spacing:5px;
}
#menu ul li:hover { color:green; cursor:pointer;}
#slogan {
margin:auto;
margin-top:200px;
height:100px;
width:800px;
text-align:center;
font-family:Cuprum;
font-size:30px;
color:whitesmoke;
line-height:50px;
border:1px solid whitesmoke;
letter-spacing:10px;
}

CHANGE BACKGROUND PHOTO WITH FORM - Script Codes JS Codes

$(document).ready(function(){
$("button").click(function(){
var gelen = $("input").val();
alert(gelen)
$("body").css("background-image","url(" + gelen + ")");
});
});
CHANGE BACKGROUND PHOTO WITH FORM - Script Codes
CHANGE BACKGROUND PHOTO WITH FORM - Script Codes
Home Page Home
Developer Vedat Sözen
Username vedatsozen
Uploaded November 27, 2022
Rating 3
Size 2,389 Kb
Views 12,144
Do you need developer help for CHANGE BACKGROUND PHOTO WITH FORM?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vedat Sözen (vedatsozen) Script Codes
Name
SIMPLE ANIMATION
MATERIAL DESIGN BUTTON ANIMATION
HOW TO CHANGE BACKGROUND IMAGE OF DIVS
SIMPLE PROFILE PAGE by JAVASCRIPT
Drop Down Menu
MOBILE PHONE PAGE WITH SIMPLE ANIMATION
LOADING ANIMATION
SIMPLE PHOTO SLIDER
SIMPLE PHOTO SLIDER
CLICKABLE MENU ..
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!